Question

我有一个内联ul，如下所示：

<ul>
  <li><span>...</span></li>
  <li><span>...</span></li>
  ...
</ul>

ul { list-style-type: none; }和li { display: inline }。每个项目都是一个标签，最终产品与每个问题上的StackOverflow标签列表非常相似（<li>包含一些文本和图标）。

我的问题是，当我有足够的物品到达行尾时，最后的<li>会中断，在当前行上留下一半而在下一行留下另一半。

如何避免这种情况？

详细说明（我正在使用Bootstrap]）：

<div class="col-lg-4">
  <ul>
    <li><span class="user_tag">User 1 <span class="glyphicon glyphicon-remove"></span></span></li>
    <li><span class="user_tag">User 2 <span class="glyphicon glyphicon-remove"></span></span></li>
    ...
  </ul>
</div>

（请注意，Bootstrap使用适当的图标填充span.glyphicon）。至于样式（使用SASS语法）：

ul {
  list-style-type: none;
}

li {
  display: inline;

  .user_tag {
    border: 1px solid #888888;
    border-radius: 5px;
  }
}

问题在于，当到达<div>的右边缘时，最后一个用户被破坏，他的名字留在当前行上，而下一行留下了字形。

Answer 1

尝试将white-space: nowrap添加到li样式中。这应该可以防止它破坏中间词并将整个事物包装到下一行。

Answer 2

实际上，您需要将<ul>元素更改为

ul{display:block}

和<li>到

li{display:inline-block}

nowrap方法将使得如果你添加一个非常长的名字，你将以一个巨大的宽度<li>元素结束。除非你正在寻找，你的方法是不正确的，可能在这个特定的情况下工作，但它一般是NO-NO。我的意思是，它可能适用于你的情况，只适用于你的情况，但对于看到这个线程的人来说，最好不要遵循这条路径，因为它不正确

如何避免在内联<ul>中打破<li>？</ul> </li>

2 个答案: