html - 带有不同文字大小的浮标正在中断

基本上，我有几个li具有不同的文本大小，不需要具有相同的高度。但我希望它的行为像行而不是下面的图像：



我感谢未使用table，flexbox或inline-block的解决方案。

* { box-sizing: border-box; }
body { margin: 50px; }

.box {
  background: #eee;
  border-radius: 5px;
  padding: 20px;
}

.box ul {
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.box li {
  background: #ddd;
  border-radius: 5px;
  float: left;
  margin-bottom: 20px;
  margin-right: 5%;
  padding: 5px;
  width: 30%;
}

.box li:nth-child(3n) { margin-right: 0; }

<div class="box">
  <ul>
    <li>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis.</li>
    <li>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá, depois divoltis porris, paradis.</li>
    <li>Mussum ipsum cacilds, vidis litro abertis.</li>
    <li>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá, depois divoltis porris, paradis.</li>
    <li>Mussum ipsum cacilds, vidis litro abertis.</li>
    <li>Mussum ipsum cacilds, vidis litro abertis.</li>
    <li>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá, depois divoltis porris, paradis.</li>
    <li>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis.</li>
    <li>Mussum ipsum cacilds, vidis litro abertis.</li>
    <li>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis.</li>
    <li>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá, depois divoltis porris, paradis.</li>
    <li>Mussum ipsum cacilds, vidis litro abertis.</li>
    <li>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá, depois divoltis porris, paradis.</li>
  </ul>
</div>

最佳答案

出现此问题的原因完全是，应用于第三列表项和第三项的css并不总是在第三列中。

.box li:nth-child(3n) { margin-right: 0; }

这基本上不保证第三项在第三列中。因此，要解决此问题，只需删除上面的样式，然后将.box li上的margin-right设置为具有较小的百分比值或绝对值（例如15px），如下所示。

参见JSFiddle click

* { box-sizing: border-box; }
body { margin: 50px; }

.box {
  background: #eee;
  border-radius: 5px;
  padding: 20px;
}

.box ul {
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.box li {
  background: #ddd;
  border-radius: 5px;
  float: left;
  margin-bottom: 20px;
  margin-right: 15px;
  padding: 5px;
  width: 30%;
}

我在列表项文本的前面添加了数字，以便您可以看到哪个项是哪个。如您所见，css代码段中，我将margin-right更改为15px并删除了.box样式。希望这可以帮助。

关于html - 带有不同文字大小的浮标正在中断，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28803542/