Question

我需要向右对齐的社交图标，以及在社交图标之前结束的菜单。

var configAuth = require('./auth');

Answer 1

您可以在.container-fluid元素上使用flexbox（我在我的小提琴中指定了类x1，我指定了display: flex）。然后将margin-left: auto放在nav元素上，将所有内容从此处移动到右侧。

另外我给标题另一个背景 - 黑色让一切都看不见......

https://jsfiddle.net/u8vyxmfe/1/

Answer 2

如果你要使用花车，你需要重新安排导航和社交菜单，这样两者都可以正确浮动，社交图标就在最右边。然后，不需要clear: right; .social-icons，但要将其与主导航对齐，您需要将相同的垂直填充应用于导航菜单链接上的.social-icons。

＆＃13;

#main-header {
    margin-top: 20px;
    background: #000;
    font-size: 14px;
    text-transform: uppercase;
}
#main-header .logo {
    float: left;
}
#main-menu {
    float: right;
}
#main-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#main-menu ul li {
    float: left;
    margin-left: 20px;
    padding: 5px;  
}
#main-menu ul li:first-child {
    margin-left: 0;
}
.social-icons {
    float: right;
    padding: 5px; 
}
.social-icons .fa {
    margin-left: 10px;
    padding: 5px;
    display: block;
    margin-left: 10px;
    float: left;
    cursor:pointer;
}

＆＃13;

<header id="main-header"> 
<div class="container-fluid">
            <a class="logo">
                <img src="logo" alt="Logo">
            </a>
  <div class="social-icons">
       
        <a style="display: inline-block" href="http://facebook.com" target="_blank"><i class="fa fa-facebook "></i>F</a>
           
        <a href="http://googleplus.com" target="_blank"><i class="fa fa-google-plus"></i>G+</a>
           
        <a href="http://twitter.com" target="_blank"><i class="fa fa-twitter"></i>T</a>
    </div>    
 </div>
            
            <nav id="main-menu" class="menu-{menu slug}-container hidden-sm hidden-xs"><ul id="menu-main-menu" class="menu clearfix"><li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-4 current_page_item menu-item-15"><a href="http://localhost/avoar/">Home</a></li>
<li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18"><a href="#">Services</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17"><a href="#">News</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16"><a href="#">Shop</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19"><a href="#">Contact Us</a></li>
</ul></nav>            


</header>

＆＃13;

对齐菜单旁边的社交图标

2 个答案: