【发布时间】：2017-09-05 04:50:09
【问题描述】：
我刚刚开始学习 Web 开发，我遇到了一些与标签、按钮和图标对齐相关的问题。
以下是我面临的问题：
品牌名称不符合 a 标签。我在每个班级都尝试了 display:inline; 但它不起作用。
社交媒体标签悬在半空中，我希望它们与 a 标签一致。同样，我尝试减少边距、填充和使用内联命令，但似乎没有任何效果。
引导搜索按钮也悬在半空。我希望以上三个都符合。
这是代码
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> -->
<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>`请原谅我的格式不正确，但我是新来的。希望能找到一些答案。谢谢
【问题讨论】：
-
您能否分享您的要求的确切屏幕截图以便更好地理解（您需要如何）。
-
您的代码 sn-ps 看起来不完整。很难理解这是否是一个错误，你有一些你想隐藏的私人内容。您能否通过确保仅删除机密数据并仍然保留“配对标签”来提供更好的代码 sn-p？例如，有一个关闭 nav 标记很难分辨它是在哪里打开的。
标签： html css twitter-bootstrap frontend