菜单项和社交图标未正确对齐

Question

我正在尝试加载一系列社交图标，然后在其下面添加一系列菜单项。

对齐不是100％右对齐且在IE中。相反，菜单项一直推到左边。

所有浏览器的理想外观应该是：

Code in a bootply

我使用bootstrap 2.2.2

HTML ：

<div class="row-fluid" id="top-header" style="background: #fff url(http://www.inter-active.co.za/images/background-top.jpg) top center;">

    <!-- Navigation -->
    <div class="sticky-wrapper" id="navigation-sticky-wrapper" style="height: 108px;">
      <div class="navbar navbar-fixed-top" id="navigation">
        <div class="container no-padding">
            <div id="logo">
                <img src="images/logo.png">
            </div>
            <div class="navbar-inner">

                <a class="show-menu" data-target=".nav-collapse" data-toggle="collapse">
                    <span class="show-menu-bar"></span>
                </a>
                <div class="nav-collapse collapse">

                    <ul class="social">
                        <li class="social"><a href="#"><img alt="" src="http://www.inter-active.co.za/images/twitter.png" ></a></li>
                        <li class="social"><a href="#"><img alt="" src="http://www.inter-active.co.za/images/linkedin.png"></a></li>
                        <li class="social"><a href="#"><img alt="" src="http://www.inter-active.co.za/images/facebook.png"></a></li>
                    </ul> 


                    <br>
                    <ul class="nav">
                        <li class="menu"><a class="colapse-menu1" href="#home">Home</a></li>
                        <li class="menu"><a class="colapse-menu1" href="#sectionA">About Us</a></li>
                        <li class="menu"><a class="colapse-menu1" href="#solutions">Solutions</a></li>
                        <li class="menu"><a class="colapse-menu1" href="#news">News</a></li>
                        <li class="menu"><a class="colapse-menu1" href="#contact-parallax">Careers</a></li>
                        <li class="menu"><a class="colapse-menu1" href="#contact">Contact Us</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
  </div><!--/Navigation -->

</div>

CSS ：

#logo {
    width:180px;
    height:100px;
    padding:4px;
    position:absolute;
}
#navigation-sticky-wrapper {
    height:45px;
}
ul.socials-icons-top li {
    width:35px;
    height:35px;
    display:inline-block
}
ul.socials-icons-top li a {
    opacity:0.5;
    transition:all 0.3s ease 0s;
    -moz-transition:all 0.3s ease 0s;
    -webkit-transition:all 0.3s ease 0s;
    -o-transition:all 0.3s ease 0s;
}
ul.socials-icons-top li a:hover {
    opacity:1;
}
#navigation-sticky-wrapper {
    height:120px;
}
.is-sticky {
    background-color:#fff;
    width:100%;
    height:121px;
    background: #fff url(../images/background-top.jpg) top center;
    width:100%;
}
.navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner {
    float:right;
    margin-right:20px;
}
.navbar-inner {
    box-shadow: none !important;
    min-height: 45px;
    line-height: 20px !important;
    transition: all 0.3s ease-out 0s;
    border-bottom: none !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    background: transparent;
    margin-top: 55px;
}
.navbar {
    position: relative;
    float:right;
    padding 0 20px;
    width:100%
}
li.social {
    width:32px;
    height:32px;
    display:inline-block;
}
ul.social {
    float:right;
    margin-right:250px;
    margin-bottom:2px;
}
.navbar .nav {
    width:960px;
    text-align:center;
    margin: 0 10px 10px 0;
}
.navbar .nav > li {
    float:none;
    display:inline-block;
    width:auto;
}
.navbar .nav > li.menu {
    margin-right:5px;
    margin-top:5px;
}
.navbar .nav > li > a {
    font-family:'Calibri', 'Arial', sans-serif;
    text-transform:uppercase;
    font-weight:400;
    font-size:14px;
    color: #e76f25;
    display: block;
    transition: all 0.3s ease-out 0s;
    line-height: 14px;
    text-shadow: none;
    height:16px;
    padding: 0px;
}
ul.menu>li:last-child a {
    border:none;
}
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
    background: none;
    box-shadow: none;
    color: #222222;
    height: 100%;
    transition: all 0.3s ease-out 0s;
}
.navbar .nav > li > a:focus, .navbar .nav > li > a:hover {
    color: #333;
    text-decoration: none;
    height: 100%;
    transition: all 0.3s ease-out 0s;
}
.navbar .show-menu {
    float: right;
    width:30px;
    margin: 7px 30px 7px 10px;
    height: 31px;
    padding:2px;
    background:url(../images/responsive-menu.png) no-repeat 2px 2px;
    background-size:30px 30px;
    cursor:pointer;
    border-radius:3px;
    opacity:0.7;
    display:none
}
.navbar .show-menu:hover {
    opacity:1;
}

Answer 1

您已添加，

<强>一个即可。具有“250px”类的ul的右边距social。

Figure - 1

<强> B'/ strong>即可。 10px下面nav的右边距social。

Figure - 2

要对齐，您需要将text-align设置为right添加240px [ a - b ] {{ 1}} padding-right。

这是CSS代码;

nav

此外，.navbar .nav { margin: 0 10px 10px 0; padding-right: 240px; /** 250px - 10px **/ text-align: right; /**/ width: 960px; } 中的每个5px都有li个右边距，其ul类。这使得菜单链接由nav向左偏移。

要解决此问题，您需要添加此CSS代码块;

5px

希望这会有所帮助。 [这是我的第一个Stackoverflow答案;）]