Question

我目前有这个菜单：

img http://gyazo.com/fcc39c339322a56190bda0755be13444.png

我使用的是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>

我做错了什么？如果您需要更多信息，请告诉我

Answer 1

试试这个：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

1 个答案: