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

Question

我正在尝试加载一行社交图标，然后在其下方加载一行菜单项。

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

在所有浏览器上的理想外观应该是:

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

你已经添加了，

一个。具有类“social”的 ul 的 250px 右边距。

Figure - 1

b。 10px social 下方的 nav 右边距。

Figure - 2

要对齐，您需要将 text-align 设置为 right 添加 240px [a - <nav 的 padding-right 的 strong>b]。

这是CSS代码；

.navbar .nav {
    margin: 0 10px 10px 0;
    padding-right: 240px; /** 250px - 10px **/
    text-align: right; /**/
    width: 960px;
}

此外，ul 中的每个 li 都有一个 5px 的右边距，它有一个 nav 类.这使得菜单链接向左偏移 5px。

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

.navbar .nav > li:last-child {
    margin-right: 0;
}

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