CODEWITHSUNDEEP
htmlcsshtml-lists
Craig
Craig

Reputation: 36856

HTML CSS LI Wrapping

I have a vertical menu in my system which is basically made of HTML ul/li with CSS styling (see image below). However I don't want the li items which are wider than the menu to wrap, I would prefer them to overflow with a horizontal scroll bar at the bottom of the menu. How can I do this in CSS?

Upvotes: 25

Views: 89005

Answers (3)

sblundy
sblundy

Reputation: 61434

Use white-space:nowrap. Like so:

li {
  white-space:nowrap;
}

Here's some documentation.

Upvotes: 7

slashnick
slashnick

Reputation: 26549

You would also need to give the style the ul:

ul{
 width:250px;
 overflow:auto;
}

Upvotes: 3

Owen
Owen

Reputation: 84573

ul {
  overflow: auto;  // allow li's to overflow w/ scroll bar
                   // at the bottom of the menu
}

li {
  white-space: nowrap; // stop the wrapping in the first place
}

Upvotes: 53

Related Questions