CODEWITHSUNDEEP
htmlcss
Kirk
Kirk

Reputation: 16245

How to prevent in-line list from wrapping

I'm attempting to have a navigation menu that stretches 100% across the page wrapper. In my testing with 5 list items, I have the following problems

Here is an example with it not wrapping at fullscreen.

enter image description here

Once you resize the browser, it wraps

enter image description here

Can someone explain WHY this happens and how to properly fix it?

The jsFiddle links above have code demonstrating the issue live and here is the code.

CSS

ul.nice-menu, ul.nice-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

#zone-menu ul > li {
    width: 19.8%;
    padding: 0;
    margin: 0;
}

ul.nice-menu li {
    margin: 0;
    padding: 0;
}

ul.nice-menu-down li {

}

ul.nice-menu li {
    display: inline-block;
    background-color: #eee;
    position: relative;
}

HTML

<div id="zone-menu">
    <ul class="nice-menu nice-menu-down">
        <li><a href="/">Another Test</a></li>
        <li><a href="/">Test</a></li>
        <li><a href="/">Another Test2</a></li>
        <li><a href="/">Menu Item 2</a></li>
        <li><a href="/">Test3</a></li>
    </ul>
</div>

Upvotes: 4

Views: 14730

Answers (4)

siddiq
siddiq

Reputation: 5

Not sure what you're really aiming for, But if you want a specific line to wrap try this. To prevent all the <li> tags from wrapping you can use the float property like so:

ul.nice-menu, ul.nice-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    float: left;
}

and then there's right …

Upvotes: 0

Reggie Pinkham
Reggie Pinkham

Reputation: 12718

Flexbox solution

Thanks to CSS flex this sort of problem has become rather trivial. One nice thing about this is that the a-tag elements remain equal heights even if one has wrapping content.

Add vendor prefixes as required.

ul {
  display: flex;
}

li {
  display: flex;
  width: 20%;
  border: 1px solid black;
}

li:not(:first-child) {
  border-left-width: 0;
}

a {
  flex-grow: 1;
  color: white;
  text-align: center;
  font-family: sans-serif;
  text-decoration: none;
  padding: 10px 15px;
  background-color: #72c2cc;
}

a:hover {
  color: #000;
}
<ul style="list-style: none; margin: 0; padding-left: 0;">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3 wraps first</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

Upvotes: 4

Explosion Pills
Explosion Pills

Reputation: 191749

Lame solution

Use display: inline-block instead of float: left for the <li>. This will allow them to respect white-space: nowrap from the parent and keep them in line regardless of width. This also requires that you deal with the whitespace between the <li> elements or else it will add space between them.

http://jsfiddle.net/L7JGg/3/

Cool solution

Use box-sizing: border-box on the <li>s. The 20% width does not include the border with the default box-sizing: content-box. Or I guess you could just remove the border...

http://jsfiddle.net/L7JGg/4/

Upvotes: 9

Daniel Moses
Daniel Moses

Reputation: 5858

The reason you are getting this is because each li is 20% wide + 1 px on each side for the border. You can fix this with a negative margin to compensate.

Add margin: 0 -1px; to the css selector ul.nice-menu li

Upvotes: 3

Related Questions