0

I set li elements for width: 50%, in order to separate the ul block into two li in one line like the picture below. And here's the JS bin for example, with normalize.css.

nice arrangement of li [Picture 1]

However, the width of li needed to be less than 50%, like 49.6% or less. If not, some space showed up between li and li for unknown reason, even though I'd set the box-sizing: border-box and margin: 0 for li.

bad arrangement of li [Picture 2]

I know I can use float: left to make it work like the first picture, but I want to know why there's space existed in picture 2.

P.S.: I'm using Chrome for my browser, if on Safari, it's okay for 49.5%.

p3nchan
  • 1,140
  • 1
  • 13
  • 26

1 Answers1

1

It's hard to know without seeing the code, but I think the issue is that li elements on different lines will display with spaces between them. Whitespace doesn't USUALLY make a difference with HTML but in the case of whitespace between li elements it does. So the following will display spaces

<ul> 
    <li style="display: inline;">1</li> 
    <li style="display: inline;">2</li> 
    <li style="display: inline;">3</li> 
</ul>

But this one won't.

<ul> 
    <li style="display: inline;">1</li><li style="display: inline;">2</li><li style="display: inline;">3</li> 
</ul>

Here's a codepen for demonstration. If you can't modify the original html, try adding a negative margin.

http://codepen.io/anon/pen/zGRYzm

whatoncewaslost
  • 2,027
  • 15
  • 22