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

时间:2014-07-15 11:18:57

标签: html css navigation

我有一个导航栏,可以浮动左侧的按钮。我不想添加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;
}

JSFIDDLE

3 个答案:

答案 0 :(得分:0)

您正在清除.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)

答案 1 :(得分:0)

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。

答案 2 :(得分:0)

我在您的标记中做了一些更改。我已将div社交内容放在父级中,并已将#social更改为您的css中的.social

WORKING CODE