CODEWITHSUNDEEP
htmlcssmenuhtml-lists
Fiona - myaccessible.website
Fiona - myaccessible.website

Reputation: 14921

Text wrapping in IE 7 <li> tags

I have a horizontal menu bar made up of <li> tags, containing links, so a menu item looks something like:

<li>
 <a href="...link...">
  <span>Some text</span>
 </a>
</li>

Looks fine, until the menu bar is wider than the screen. When this happens, and the last menu item has one or more words, the second word of this item wraps just underneath the bar. If the screen is made even smaller, then it works fine, as the whole <li> just gets wrapped to the line below.

The <li> tags have a few CSS styles applied to them:

display:block;
padding:5px;
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;

I can get my desired behaviour of the whole <li> wrapping to the line below if I explicitly set a width on the <li> item. However, I don't want to do this, as they are all different sizes by design.

Any ideas?

Upvotes: 1

Views: 2221

Answers (2)

Alex
Alex

Reputation: 12433

Use 

li span {
    white-space: nowrap;
}

rather than the child selector ( li > a > span ), since the child selector is not supported by all browsers yet.

Upvotes: 2

user151323
user151323

Reputation:

Add white-space:nowrap;

li > a > span
{
    white-space:nowrap;
}

This should keep item texts on one line.

Upvotes: 3

Related Questions