CODEWITHSUNDEEP
htmlcss
gdiazc
gdiazc

Reputation: 2148

How to avoid breaking <li>'s in an inline <ul>?

I have an inline ul, like so:

<ul>
  <li><span>...</span></li>
  <li><span>...</span></li>
  ...
</ul>

with ul { list-style-type: none; } and li { display: inline }. Each item is a tag, and the final product looks extremely similar to StackOverflow's list of tags on each question (a <li> contains some text and an icon).

My problem is that when I have enough items to reach the end of the line, the last <li> breaks, leaving half on the current line and the other half on the next line.

How to avoid this?

To elaborate (I am using Bootstrap]):

<div class="col-lg-4">
  <ul>
    <li><span class="user_tag">User 1 <span class="glyphicon glyphicon-remove"></span></span></li>
    <li><span class="user_tag">User 2 <span class="glyphicon glyphicon-remove"></span></span></li>
    ...
  </ul>
</div>

(note that Bootstrap fills the span.glyphicon with the appropriate icon). As to the styling (using SASS syntax):

ul {
  list-style-type: none;
}

li {
  display: inline;

  .user_tag {
    border: 1px solid #888888;
    border-radius: 5px;
  }
}

The problem is that upon reaching the right edge of the <div>, the last user is broken, leaving his name on the current line, and the glyphicon on the next line.

Upvotes: 4

Views: 10263

Answers (2)

Devin
Devin

Reputation: 7720

In fact what you need is to change your <ul> element to

ul{display:block}

and <li> to

li{display:inline-block}

the nowrap approach will make that if you add a really long name, you'll end with a massive width <li> element. Unless you're looking for that, your approach is incorrect, might work in this specific case, but it's a NO-NO in general . I mean, it might apply to your case and ONLY TO YOUR CASE, but for people seeing this thread, it's better not to follow that path since it's incorrect

Upvotes: 4

ajm
ajm

Reputation: 20105

Try adding white-space: nowrap to your li style. That should prevent it from breaking mid-word and will wrap the entire thing to the next line.

Upvotes: 9

Related Questions