Html 从引导导航栏中删除浮动而不影响布局

嘿，伙计们，我对css基本上是新手，试图构建一个引导导航栏，问题是我必须将导航栏的某些内容居中，即，将菜单项居中

基本上，在浏览了引导导航栏的源代码之后，我发现导航栏中的所有元素出现在一行中而不是移动到下一行的原因是因为导航栏中的元素是向右或向左浮动的，移除浮动的移动会破坏对齐

所以我尝试做的是：-HTML代码（典型的引导标记）：

需要注意的是，我如何在

ul.navbar nav

和

ul.navbar-nav li

提琴，现在看内容如何了

<ul class="nav navbar-nav navbar-right">
                <li><a href="#"><img src="http://images.dailyo.in/images/facebook_two.png" alt=""></a></li>
            </ul> 

浮动到下一行。我是否可以将内容重新与菜单项对齐

p.S.：：我真的希望避免使用绝对定位

多谢各位

---

亚历克斯-z

如果我对您的问题的理解是正确的，可能会通过如下更改CSS

.navbar-default .navbar-collapse  ul.navbar-nav{
    text-align: center;
    float: none;
    text-align:left;

与保留FB标志的另一个UL不同，保持整个Li与第一个UL相同，并向右对齐，这应该会有所帮助

因此，最终的html将是

<nav role="navigation" class="navbar navbar-default navbar-fixed">
         <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <!-- <a href="#" class="navbar-brand">Brand</a> -->       <!-- </div>-->
    <!-- Collection of nav links and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Messages</a></li>
            <li style="float:right"><a href="#"><img src="http://images.dailyo.in/images/facebook_two.png" alt=""></a></li>
        </ul>

    </div>
</div>

切换导航

你可以检查一下结果

希望这有帮助

谢谢，

---

Philemon

对不起，您希望的布局是什么？我想你最好能画出来out@RLam，感谢您询问ram，它的布局并不复杂，非常简单，，，请看我如何删除我的样式（CSS），左侧的facebook徽标将以内联方式显示。我希望FB图标是内联的！你能澄清一下吗-与什么有关？非常感谢。。。但是主导航栏元素必须居中对齐，你的小提琴让他们左对齐！

.navbar-default .navbar-collapse  ul.navbar-nav{
    text-align: center;
    float: none;
    text-align:left;

<nav role="navigation" class="navbar navbar-default navbar-fixed">
         <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <!-- <a href="#" class="navbar-brand">Brand</a> -->       <!-- </div>-->
    <!-- Collection of nav links and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Messages</a></li>
            <li style="float:right"><a href="#"><img src="http://images.dailyo.in/images/facebook_two.png" alt=""></a></li>
        </ul>

    </div>
</div>