如何将 li 元素下的元素保持在同一行？答案

【问题标题】：How to keep elements under a li element in the same line?如何将 li 元素下的元素保持在同一行？
【发布时间】：2014-09-17 13:31:49
【问题描述】：

我希望 li 下的元素在单行中显示。如果字符超过了 div 的长度，那么它应该换行。

这是我的小提琴的链接。

http://jsfiddle.net/NmhB5/

现在我希望在那个 div 中我的 li 元素内的所有元素都应该是一样的。例如：

O 1.abcdefghijklmnopqrstuvwxyz
O 2. 12345678901234567890

就像那样。现在我们可以看到它超过了 div 的长度，所以我想像这样包装它。

O 1. abcdefghijklmnopqrstuv
     wxyz
O 2. 12345678901234567890

我该怎么做？

【问题讨论】：

标签： html css

【解决方案1】：

你可以添加这个

span {
   display: inline-block;
   word-break:break-all; /* add this */
}

JSfiddle Demo

【讨论】：

+1 伴侣。抱歉，在添加我的之前没有注意到您的回答。
不用担心......你的仍然很有价值，因为它提供了更多我忽略的风格选项，因为我不确定 OP 到底想要什么。
word-break: break-all 会从任何地方打断一个单词，但我想要的是，如果我必须打断这个单词，那么整个单词应该转到下一行。该怎么做？

【解决方案2】：

您可以使用以下 CSS 来实现：

span {
    display: block;
    word-break: break-all;
}

另外，鉴于您正在有效地再次对列表进行编号，为什么不使用有序列表 (<ol>) 标记而不是使用无序列表 (<ul>)，然后为编号添加一个额外的跨度。

我会推荐以下标记：

<div>
    <ol>
        <li>abcdefghijklmnopqrstuvwxyz</li>
        <li>123456789012345678901234567890</li>
    </ol>
    <ol>
        <li>abcdefghijklmnopqrstuvwxyz</li>
        <li>123456789012345678901234567890</li>
    </ol>
</div>

CSS：

div {
   right: 0px;
   width: 200px;
   border: double;
   position: absolute;
}

li {
    word-break: break-all;
}

Demo

注意：您可以参考when to use UL or OL in html? 上的此线程。但是这个答案和Paulie_D 发布的答案的症结是相同的，因为它们都使用word-break 属性。

更新：为了在溢出时将整个单词环绕到下一行，您可以使用以下设置。

li {
    word-wrap: break-word;
    /* Webkit supports word-break: break-word; also but it seems to be non-standard */
}

Updated Demo

【讨论】：

word-break: break-all 会从任何地方打断一个单词，但我想要的是，如果我必须打断这个单词，那么整个单词应该转到下一行。该怎么做？
@user3745870：请参考我在回答伙伴中的更新。
如果我是这样写的 jsfiddle.net/7Luh4 那么我怎样才能确保“我是一名软件工程师。我仍在努力成为一个好人”的文字不会出现在下面图像？
非常粗略的尝试，但您可以尝试类似this。
这看起来不错，但可以说当我将鼠标悬停在文本上时会显示一个边框，并且我希望边框应该与文本一样长。在这种情况下，如果我只写border：double，那么所有文本的宽度都是相同的。我怎样才能做到这一点？

【解决方案3】：

你知道你可以有一个带有数字的有序列表，例如http://www.w3schools.com/cssref/playit.asp?filename=playcss_ol_list-style-type&preval=decimal-leading-zero

例如

html

<ol>
    <li> jguhiuo</li>
    <li> jhii</li>
</ol>

css

 ol#myList
{
list-style-type:decimal;
}

链接 http://jsfiddle.net/NmhB5/5/

【讨论】：