如何避免行内 <ul> 中的 <li> 断行？

Question

如何避免行内 <ul> 中的 <li> 断行？

4

我有一个内联的无序列表，如下所示：

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

使用

标签，ul { list-style-type: none; }和li { display: inline }样式。每个item都是一个tag，最终产品看起来非常类似于StackOverflow上每个问题的tags列表（一个<li>包含一些文本和一个图标）。
我的问题是，当我有足够的items达到行末时，最后一个<li>会被打断，一半在当前行上，另一半在下一行上。
如何避免这种情况？
为了详细说明（我使用Bootstrap）：
```
<div class="col-lg-4">
 <ul>
 <li>User 1 </li>
 <li>User 2 </li>
 ...
 </ul>
</div>
```
请注意，Bootstrap会使用适当的图标填充。至于样式（使用SASS语法）：
```
ul {
 list-style-type: none;
}

li {
 display: inline;

 .user_tag {
 border: 1px solid #888888;
 border-radius: 5px;
 }
}
```
问题是当达到
的右边缘时，最后一个用户会被打断，他的名字留在当前行，而glyphicon则出现在下一行。

- gdiazc

2

你能发布更多你的HTML和CSS吗？ - Pooshonk

什么是跨度(span)的作用？ - misterManSam

1

看一下这个问题。也许这就是你寻找的？类似于 ul li{ display: inline; }这样的东西？ - manosim

该 span 主要包含文本和一个图标：用户名 （该图标由 Bootstrap 提供）。 - gdiazc

li { display: inline } 可以很好地显示行内列表。但是，如果例如元素 <li>User 8...</li> 部分适合一行（例如，仅适合“User”但不适合数字或图标），则会被打破，其中“User”出现在原始行上，但其余部分出现在下一行上。如果我们绘制边框，则断裂更为明显。 - gdiazc

2个回答

4

事实上，您需要更改您的<ul>元素为：

ul{display:block}

and <li> to

li{display:inline-block}

使用不换行的方法会导致如果添加一个非常长的名称，您将以极大的宽度结束<li>元素。除非您正在寻找这种效果，否则您的方法是错误的，在特定情况下可能有效，但在一般情况下是行不通的。我的意思是，它可能适用于您的情况，并且仅适用于您的情况，但对于看到此线程的人来说，最好不要遵循该路径，因为它是不正确的。

- Devin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ajm · Accepted Answer

9

尝试在您的

样式中添加white-space: nowrap。这将防止它在单词中间断开，并将整个内容换行到下一行。

- ajm

@Gonzalo 如果你需要使用这样的属性，那么我相信你一定做错了什么。 - Mr. Alien

请您详细说明一下，好吗？ - gdiazc

2

@Gonzalo 我不认为有任何理由防止文本换行，这可能会导致溢出... 顺便说一句，这个答案是正确的，但你的方法不对。 - Mr. Alien

我已经在上面的问题中扩展了我想要实现的内容的解释。考虑到这一点，您能否发布一个更好方法的草图答案？谢谢！ - gdiazc

1

@Gonzalo，我正在通话中，但我看到你的一行里有太多项，因此它会被打断，这意味着你的设计有缺陷。将常见函数分组并相应地构建布局。 - Mr. Alien