给3个inline-block子元素设置父元素的1/3 width却无法并排 ?

Question

html 结构如下:

css样式如下:

    * { margin: 0; padding: 0; }
    nav { width: 300px; margin: 0 auto; background-color: #eee; }
    ul { list-style-type: none; width: 300px; }
    a { text-decoration: none; color: black; }
    
    .first>li {
        display: inline-block;
        width: 33%;
    }
      /*
      fixme: 设置为inline-block后, 33%的width,仍旧会超出;
      1. inline-flex,inline-table同样会出现类似问题,float后可以完全并排 ?
      2. inline-是否有默认的margin或padding ?
      <=32% 或 <= 96px 才能并排
      todo: 是什么原因让其无法并排的?
     */

问题: 父元素 ul的width为300px, 将3个子元素li设置为inline-block,同时 width设置为ul的 33%, 发现 3个 li无法并排, 最后一个 li会被挤下来, 如图:

检查父元素 ul如下:

子元素 li 如下:

疑问

1. 是不是因为inline-block水平方向上有默认的spacing, 将inline-block改为其他inline-方式的也出现类似的问题 ?

2. 将 ul和 li中-webkit-开头的都设为0 也没用 ?

3. 尝试 让 3 个 li 浮动后又解决了这个问题, 这又是为什么 ?

Answer 1

因为使用了inline-block之后，li标签实际上变成了行内元素，这时候li标签之间的换行符和空格也会被算上宽度，所以会导致溢出。使用float布局不会出现这种问题，所以不会溢出。
解决办法是给ul设置font-size:0;这样li之间的空格和换行符会不占宽度，li就可以并排了。
或者直接把li之间的空格和换行符都删掉也可以。

Answer 2

1.这还是因为inline-block的间距问题

2.那些只是列表内默认的样式，跟消除inline-block的间距没什么关系，你试试先在ul设置font-size: 0;，然后再在li里设置font-size: 16px;

3.浮动是因为把元素设置成了display: block;，所以消除了inline-block的间距问题