为什么不能强迫ul充当表行？

Question

我正在使用bootstrap3 ，并且我想有一个navbar ，其中所有nav项都在条的整个宽度上隔开。

要实现此目的，我唯一的选择是使栏的行为类似于table -row或-cell 。

我有正确的标记和CSS，但是显然我不能以某种方式强制display: table-row; 在我的ul 。

现场例子

奇怪的是：

• Firefox和Chrome都报告虽然table-row是最重要的规则，但它们适用于block

  

• 这仅在我包含bootstrap3时发生（尝试在实际示例中进行切换）

的HTML

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
        <li class="">
            <a href="#">Homeen</a>
        </li>
        <li class="">
            <a href="#">News</a>
        </li>   
    </ul>
</div>

的CSS

.collapse.navbar-collapse {
  display: table !important;
  width: 100%;
}
.navbar .nav {
  display: table-row !important;
  width: 100%;
  background: #fff;
}
.navbar .nav > li {
  display: table-cell !important;
  background: #39f;
  float: none;
}

Answer 1

只是让它成为餐桌男人。

要使此工作正常进行而没有任何浏览器错误，您将必须编写所有疯狂的代码，而这些错误的代码将比表标记更丑陋。

Answer 2

我知道了

我只需要取消浮动.nav

.nav {
   float: none;
}

工作实例

叹气 ，又是一个小时的迷失 但是我将问题抛在脑后，也许可以节省一个人的时间。