CODEWITHSUNDEEP
htmlcssgoogle-chrome
Alex Latchford
Alex Latchford

Reputation: 655

nowrap item overflowing its box

Getting some strange behaviour with nowrap and list items. How do I get the padding to apply to the "Testing 123" li properly in chrome? (The "3" from testing 123 is outside the defined width and encroaches on the padding).

Essentially what I'm trying to achieve is that the ul will be as wide as the widest li, hence the use of float: left. But at the same time I want to keep the dashed border, li padding and keep the text of each item on the same line, hence white-space: nowrap.

HTML:

<ul>
    <li>Some</li>
    <li>Content</li>
    <li>Testing 123</li>
</ul>

CSS:

ul {
    float: left;
    padding: 0;
    margin: 0;
}

li {
    padding: 10% 15%;
    border-bottom: 1px dashed #333;
    list-style-type: none;
    white-space: nowrap;
    font-size: 2em;
}

http://jsfiddle.net/T9emf/2/

Upvotes: 0

Views: 135

Answers (2)

Passerby
Passerby

Reputation: 10070

OK, extending from comment:

The root problem is that, your ul is auto-width-ed, but your lis use percentage padding, so when browsers come to render li, it needs to calculate how many actual padding should give, but then find that it can't, for there's no width info on their parent.

On this fiddle: http://jsfiddle.net/T9emf/3/, use Chrome DevTools to toggle display:inline-block and width:auto on and off repeatedly and observe the lis getting different size. The reason for that is since browser can't directly decide how many padding should give, it may try to decide later, so whenever layout changes, the lis may shift.

To fix this problem one possible way would be to give absolute padding to lis, like this:

http://jsfiddle.net/T9emf/4/

ul {
/*    float: left;*/
    display:inline-block;
}

li {
    padding: 1ex 1em;
}

Adjust the padding value to meet visual sweet spot.

The upside of em is that it has the possible to zoom in and out nicely, as it is a percentage unit bind to font size.

Upvotes: 1

Shen Weizheng
Shen Weizheng

Reputation: 191

Adding the width:100%; to the style of "li" will resolve your problem. The reason is that, the "li" element has a "10" left padding, but the border is drawn with the exact width of the text. Then it looks like the text overflows.

Upvotes: 0

Related Questions