我有一个导航栏，它在左侧 float 按钮。我不想添加 4 个社交媒体图标，但我希望它们在右侧对齐。但是，我们添加了社交媒体图标，它们在右侧对齐但不与导航栏内联，而是在其下方。添加 top:-50px; 没有帮助。
<body>
<div class="menu">
<ul>
<li>TL Custom Printing</li>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Custom Printing</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
<div class="clearFloat"></div>
</ul>
</div>
<div class="social">
<a href="#" title="Follow TL Custom Printing on Twitter" alt="TL custom Print Twitter Icon"><img src="images/twitter.png" /></a>
<a href="#" title="Like TL Custom Printing on Facebook" alt="TL custom Print Facebook Icon"><img src="images/fb.png" /></a>
<a href="#" title="Follow TL Custom Printing on Flickr" alt="TL custom Print Flickr Icon"><img src="images/flickr.png" /></a>
<a href="#" title="Follow TL Custom Printing on Pinterest" alt="TL custom Print Pinterest Icon"><img src="images/pinterest.png" /></a>
</div>
</body>
CSS:
/* Navigation Bar
----------------------------------------------- */
.menu{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
width:100%;
}
.menu ul{
list-style:none;
background:#2d2d2d;
margin:0;
padding:0;
}
.menu li{
display:inline-block;
float:left;
}
.menu li:first-child{
margin-left:20px;
margin-right:20px;
display:block;
padding:10px;
text-decoration:none;
color:#ff4800;
font-weight:bold;
font-size:14px;
border-top:2px solid transparent;
}
.menu a{
display:block;
padding:10px;
text-decoration:none;
color:#bbbbbb;
border-top:2px solid transparent;
}
.menu a:hover,
.menu li.active a{
background:#3d3d3d;
color:#dddddd;
border-top:2px solid #ff4800;
}
.clearFloat{
clear:both;
}
/* Social Media Icons
----------------------------------------------- */
#social {
float:right;
}
最佳答案
您正在清除 .menu div 中的 float ，因此 .menu 和 .social 永远不会位于同一行。这是一种解决方案(其中有很多):
<div class="menu_wrap"> <!-- ADD A WRAPPER -->
<div class="menu">
<ul>
<!-- REMOVE THE CLEARFIX FROM HERE -->
</ul>
</div>
<div class="social">
...
</div>
<div class="clearFloat"></div> <!-- ADD CLEARFIX HERE -->
</div>
CSS
.menu_wrap {
background: #000;
}
此外，#social { 应该是 .social {(类不是 ID)
关于html - 添加与导航栏同级的社交图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24756844/