<li>元素没有正确地保持连续样式

Question

任何人都可以帮忙告诉我这是什么，为什么这些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>

顺便说一句，如果您无法通过屏幕截图判断或未查看它，我正在使用Safari。

Answer 1

尝试将li元素的box-sizing属性更改为border-box（请参阅https://css-tricks.com/box-sizing/）。边框被添加到32％宽度，总宽度超过100％

Answer 2

向Box-sizing: Border-box;块添加li CSS样式。

还尝试删除您添加到li块的右边距或至少减少它。这导致列表中的换行符。

Answer 3

问题在于ul元素，即inline。因此，当您将width设置为100％时，其计算的width为auto。空间的变化是由这个尺寸不合适的父元素引起的。尝试右键单击并检查元素以便自己查看。

li的宽度看似理想，因为它们实际上占据了W.R.T.的百分比。包含div。

解决您的问题的方法可能是将ul display设置为block或inline-block。这样width ul生效。

＆＃13;

＆＃13;

<style>

  .navigator ul {
    display: inline-block;
    padding: 0;
  }
  .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%;" id="liId1" data-reactid=".0.0.$1">One</li>
      <li style="width:32%;" id="liId2" data-reactid=".0.0.1">Two</li>
      <li style="width:32%;" id="liId3" data-reactid=".0.0.2">Three</li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

一个小问题是边框和边距，它会在较小的屏幕上搞乱（阈值为4％父宽度==边框宽度和边距）。尝试使用填充而不是边距和box-sizing: border-box;

Answer 4

邪恶的“黑客”修复：

.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;      
  }