CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Artemkller545
Artemkller545

Reputation: 999

Making block elements of ul nav automatically fill the whole width

I currently have this menu:

img
(source: gyazo.com)

I am using Twitter Bootstrap 3, the .container class. What I am trying to do is, making the elements width scale automatically according to the amount of the elements in the ul + the width of the container.

I have attempted to do this, but this doesn't work:

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

As you see I am firstly accessing #vote using .container because #vote is child of .container. #vote is basically the dark area you see that the nav is contained in. #vote-list is child of #vote.

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

I have tried changing the child selectors to direct access, but it is giving me the same results.

The 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>

What did I do wrong? Let me know if you need more information

Upvotes: 1

Views: 60

Answers (1)

Pete
Pete

Reputation: 58422

try this:

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

Upvotes: 2

Related Questions