在导航栏的同一级别添加社交图标答案

【问题标题】：Add Social icon on same level as the navigation bar在导航栏的同一级别添加社交图标
【发布时间】：2014-07-15 11:18:57
【问题描述】：

我有一个导航栏，可以让左侧的按钮浮动。我不想添加 4 个社交媒体图标，但我希望它们在右侧对齐。但是，我们添加了社交媒体图标，它们在右侧对齐但不与导航栏内联，而是在其下方。添加top:-50px;doesnt 帮助。

<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;
}

JSFIDDLE

【问题讨论】：

jsfiddle 会很好，images missing here
看看这是否有帮助jsfiddle.net/karan3112/PZC4R

标签： html css navigation

【解决方案1】：

您正在清除 .menu div 中的浮点数，因此 .menu 和 .social 将永远不会坐在同一行。这是一种解决方案（其中有很多）：

DEMO

<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）

【讨论】：

我现在如何将图像垂直居中？

【解决方案2】：

Do You need this

说明： 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。

【讨论】：

【解决方案3】：

我对您的标记进行了一些更改。我已将 div 社交放在父级中，并将您的 css 中的 #social 更正为 .social。

WORKING CODE

【讨论】：