css - 我的导航栏不会水平对齐

Question

我目前正在使用 Bootstrap 3 为我的第一个客户创建网站，但我无法使导航栏正确对齐。当我到达 col-sm 断点时，它停止显示内联。我查阅了许多其他文章并应用了许多不同的 CSS 属性，但无济于事。在这一点上，我认为我的代码中可能存在错误，但我不确定。这是我的第一个真正的元素，所以我在技术上是一个新手(请原谅我糟糕的代码:P)。如果我遗漏了什么，请告诉我。这是屏幕截图和我的代码。

<nav class="navbar navbar-default navbar-fixed-top" id="navbar">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand " href="index.html">Spa&bull;ology</a>
        </div> <!-- /.navbar-header -->
        <!--NAV LINKS-->
        <div class="collapse navbar-collapse" id="navbar-collapse-1">
            <ul class="nav navbar-nav ">
                <!--LINKS-->
                <li><a href="index.html">Home</a></li>
                <!--DROPDOWN LINKS-->
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="waxingandsugaring.html">Waxing &amp; Sugaring</a></li>
                        <li><a href="manisandpedis.html">Manis &amp; Pedis</a></li>
                        <li><a href="spraytanning.html">Spray Tanning</a></li>
                        <li><a href="massages.html">Massages</a></li>
                        <li><a href="lashes.html">Lash Extensions</a></li>
                        <li><a href="facialsandpeels.html">Facials &amp; Peels</a></li>
                    </ul><!-- /.dropdwon-menu -->
                </li>
                <!-- /.dropdown -->
                <li><a href="#">Products</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="http://www.secure-booker.com/spaology/ShopOnline/GiftCertificate.aspx" target="_blank">Gift Certificates</a></li>
                <li><a href="http://www.secure-booker.com/spaology/MakeAppointment/" target="_blank">Book Online</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container -->
</nav>

以下是我尝试过的一些 CSS 属性。我使用了这些属性的不同组合，但均无济于事。

.navbar .navbar-nav > li {
float:left;    
} 

.navbar .navbar-nav > li {
display:inline;    
}

.navbar .navbar-nav > li {
display:block;
float:left;
vertical-align: top  
}

Answer 1

只需查看您的 css，您就定义了 display 和 float 2 次。删除重复的条目并根据需要进行修改

.navbar .navbar-nav > li {
display:inline;
position:relative;
display:block;
float:left;
vertical-align: top;
} 

试试这个 https://jsfiddle.net/4k1yoctf/2/