0
我剛剛開始學習網絡開發，並且一直面臨着與標籤，按鈕和圖標對齊有關的一些問題。如何把圖標與其他標籤一致？
這裏是我現在面臨的問題：
品牌名稱是不符合一個標記線。我試過display：inline;在每個班，但它不工作。
社交媒體標籤掛在半空中，我想他們是在與一個標記線。再次，我試圖減少邊距，填充和使用內聯命令，但似乎沒有任何工作。
引導搜索按鈕也懸半空中。我希望以上所有三者一致。
下面是該頁面的屏幕截圖。 
而這裏的代碼
header {
background: #669999;
color: white;
padding: 5px 5px 5px 15px;
}
.fontsize {
color: white;
margin: 0px 0px 0px 10px;
font-size: 25px;
padding: 5px;
}
.icon {
float: right;
list-style-type: none;
margin: 0px 10px 0px 10px;
padding: 5px;
display: inline;
}
body {
margin: 0px;
}
.colors {
margin: 5px 10px 5px 10px;
padding: 10px;
color: white;
}
a:hover.colors {
color: black;
text-decoration: none;
}
.picturefont {
font-size: 25;
font-style: italic;
}
.whitespace {
padding: 10px;
margin: 50px;
}
#margin {
margin: 0px;
}
.frontpageimage {
width: 90%;
display: inline;
border: 1px solid black;
}<h1 class="fontsize"> Brand name </h1>
<nav>
<a class="colors" href="home.html"> Home </a>
<a class="colors" href="contact.html"> Contact </a>
<a class="colors" href="recipe.html"> Recipes </a>
<a class="colors" href="order.html"> Order </a>
<ul>
<li class="icon">
<a href="#"><img src="icon-insta.png"></a>
</li>
<li class="icon">
<a href="#"><img src="fb-icon.png"></a>
</li>
<li class="icon">
<a href="#"><img src="phone-icon.png"> </a>
</li>
</ul>
</nav>
<form id="margin" class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<!-- <li><a href="#">Link</a></li> \t -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span
class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<body>
<div class="row">
<div class="col-sm-2 whitespace picturefont">
<a href="recipe.html">
<img class="frontpageimage" src="oreo-cake.jpg"></a> Chocolate Cake</div>
<div class="col-sm-2 whitespace picturefont">
<a href="recipe.html">
<img class="frontpageimage" src="kitkat-cake.jpg"></a> Rasberry Sponge Cake
</div>
<div class="col-sm-2 whitespace picturefont">
<a href="recipe.html">
<img class="frontpageimage" src="green-cake.jpg"></a> Red Velvet Cake</div>
<div class="col-sm-2 whitespace picturefont">
<a href="recipe.html">
<img class="frontpageimage" src="KitKatCake3.jpg"></a> Mango Rose Tart
</div>
</div>
<div id="slider">
<div id="slider2">
<img id="choclatecake" src="oreo-cake.jpg" alt="Moist Chocolate Cake" />
<img id="choclatecake" src="kitkat-cake.jpg" alt="Moist Chocolate
Cake" />
<img id="choclatecake" src="green-cake.jpg" alt="Moist Chocolate Cake" />
<img id="choclatecake" src="KitKatCake3.jpg" alt="Moist Chocolate
Cake" />
</div>
</div>`原諒我的不正確的格式，但我是新來的。希望找到一些答案。由於
您可以分享您的需求的確切屏幕截圖，以便更好地理解（您需要如何）。 –
你的代碼片段看起來不完整。這很難理解，如果這是一個錯誤，你有隱私的東西，你想隱藏。你能否通過確保只刪除機密數據並保留「對標籤」來提供更好的代碼片段？例如，有一個關閉的* nav *標記很難說明它已經打開的位置。 – Scantlight