Javascript <；李>；元素不是'；t使用内嵌样式正确地保持一排

有谁能告诉我一条线发生了什么，为什么这些li元素不在一条线上？我希望宽度为33%时可以正常工作，但当我这样做时，第三个li元素将转到文档的下一行/开头

所以我决定把32%放在这里，但当我这样做的时候，结果就是附加的图像

我真的希望能用33%，但是是的

代码如下：

<style>

  .navigator ul {
    display: inline;
  }
  .navigator li {
    /*display: table-cell;*/
    display: inline-block;
    list-style-type: none;
    float: left;
    border: solid 2px purple;
    background-color: yellow;
    text-align: center;
  }
  .popupDiv {

  }
</style>
<div id="example">
  <div style="font-size:20px;" class="navigator" data-reactid=".0">
    <ul style="width:100%;" data-reactid=".0.0">
      <li style="width:32%;margin-right:5px;" id="liId1" data-reactid=".0.0.$1">One</li>
      <li style="width:32%;margin-right:5px;" id="liId2" data-reactid=".0.0.1">Two</li>
      <li style="width:32%;margin-right:5px;" id="liId3" data-reactid=".0.0.2">Three</li>
    </ul>
  </div>
</div>

<script type="text/babel" src="build/helloworld.js"></script>

.导航器ul{
显示：内联；
}
李先生{
/*显示：表格单元格*/
显示：内联块；
列表样式类型：无；
浮动：左；
边框：纯色2倍紫色；
背景颜色：黄色；
文本对齐：居中；
}
波普迪夫先生{
}

一个
宽度：32%；右边距：5px；id=“liId2”数据反应id=“.0.0.1”>两个
三个

---

顺便说一句，如果你不能从截图中分辨出来或者没有看它，我正在使用Safari。

尝试将li元素的框大小属性更改为边框框（请参阅）。将边框添加到32%的宽度，使总宽度超过100%

添加一个

框大小：边框框CSS样式到
li
块

另外，请尝试删除添加到
li
块中的右边距，或者至少减少它。这导致列表中的行中断。
问题在于
ul
元素，它是
内联的。因此，当您将其
width
设置为100%时，将计算
width
为
auto
。空间移动是由此大小不适当的父元素引起的。尝试右键单击并检查元素，以便自己查看

li
的宽度看起来很理想，因为它们实际上是包含
div
的W.R.T.的百分比

解决问题的方法可能是将
ul
的
显示设置为
块
或
内联块
。这样，
ul
上的
宽度就生效了



.导航器ul{
显示：内联块；
填充：0；
}
李先生{
/*显示：表格单元格*/
显示：内联块；
列表样式类型：无；
浮动：左；
边框：纯色2倍紫色；
背景颜色：黄色；
文本对齐：居中；
}
波普迪夫先生{
}

一个
两个
三个

邪恶的“黑客”修复：

. 但这可能是垂直对齐问题，请参阅
.navigator ul {
    display: block;
    font-size: 0;
  }
  .navigator li {
    font-size: 12px;
    display: inline-block;
    list-style-type: none;       
    border: solid 2px purple;
    background-color: yellow;
    text-align: center;
    vertical-align: top;      
  }