html - 使ul nav的块元素自动填充整个宽度

我目前有这个菜单：

（来源：gyazo.com）

我正在使用Twitter Bootstrap 3，.container类。我正在尝试做的是，根据ul中的元素数量+容器的宽度自动使元素的宽度缩放。

我尝试这样做，但这不起作用：

@media (min-width: 428px) and (max-width: 991px) {
    .container > #vote > #vote-list {
        width: 100%;
        background-color: red;
        padding: 0;
    }
    #vote-list li {
        width: auto;
        float: left;
        display: table-cell;
        margin-left: 1px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

如您所见，我首先使用#vote访问.container，因为#vote是.container的子级。 #vote基本上是您看到导航所包含的黑暗区域。#vote-list是#vote的子级。

#vote {
    background-color: #161616;
    min-height: 560px;
    width: 100%;
}

我尝试将子选择器更改为直接访问，但这给了我相同的结果。

的HTML：

<body class="container">
    <section id="vote">
        <ul id="vote-list">
            <li>MyNav</li>
            <li>MyNav</li>
            <li>MyNav</li>
            <li>MyNav</li>
            <li>MyNav</li>
        </ul>
    </section>
</body>

我做错了什么？如果您需要更多信息，请与我们联系

最佳答案

尝试这个：

#vote-list {
  width: 100%;
  background-color: red;
  padding: 0;
  display: table; /* add this */
}

#vote-list li {
  /* remove float:left; */
  display: table-cell;
  margin-left: 1px;
  padding-left: 10px;
  padding-right: 10px;
}

<section id="vote">
  <ul id="vote-list">
    <li>MyNav</li>
    <li>MyNav</li>
    <li>MyNav</li>
    <li>MyNav</li>
    <li>MyNav</li>
  </ul>
</section>

关于html - 使ul nav的块元素自动填充整个宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28110364/