我有一个导航栏,可以浮动左侧的按钮。我不想添加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;
}
答案 0 :(得分:0)
您正在清除.menu
div中的花车,因此.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)
答案 1 :(得分:0)
说明: 1.将页眉/页脚的宽度设置为100%。
.header
{
background: #333;
width: 100%;
height: 10%;
overflow: hidden;
}
2。将宽度设置为菜单以及社交和浮动属性..
.social
{
float:right;
width: 100%;
height: 100%;
overflow: hidden;
width: 28%;
}
.social a img
{
margin-top: 10px;
}
您的代码中没有社交ID。
答案 2 :(得分:0)
我在您的标记中做了一些更改。我已将div
社交内容放在父级中,并已将#social
更改为您的css中的.social
。