使用时阻止项目下的项目文本换行：在使用子列表增加计数器之前

Question

我有一个简单的有序列表，其中包含一些列表项，其中可能是一个子列表。我想将列表项的数量增加到子/子排序列表，因此布局如下：

1. Blah blah blah
2. Yeah yeah yeah
3. Jadda jadda jadda
3.1 Sub jadda
3.2 Sub Jadda

这不是很难做到，我的代码执行此操作（查看代码段）...

.container {
	background-color: #c7e8f7;
	border: 1px solid #00bcd4;
	width:800px;
	padding: 5px;
}

ol {
	counter-reset: item;
	list-style-type: none;
	padding-left: 0px;
}

li:before {
	content: counters(item, ".") ".";
	counter-increment: item;
}

/* Add an indent to the sub ol*/

ol ol {
	padding-left: 10px;
}

<div class="container">
<ol>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis, interdum libero non, tincidunt dolor. Quisque vestibulum vitae augue eu tempus. Suspendisse nec enim mollis, auctor mi vitae, tincidunt lectus. Nullam interdum nisi at elit pretium, in tempus elit pharetra. Etiam posuere tempor sapien. Mauris pretium augue sapien, id vestibulum elit scelerisque a. Sed condimentum ligula mauris, in posuere metus ultricies eu. Quisque ac sem ut mauris finibus porta. Etiam sit amet aliquam odio, eu interdum tortor. Etiam ac porttitor nunc, quis elementum diam. Morbi nec vestibulum quam. Proin ultricies tempus tellus sit amet ultrices. Cras quam dolor, vestibulum non quam ut, rutrum tincidunt augue. Vestibulum et nisl elit.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis, interdum libero non, tincidunt dolor. Quisque vestibulum vitae augue eu tempus. Suspendisse nec enim mollis, auctor mi vitae, tincidunt lectus. Nullam interdum nisi at elit pretium, in tempus elit pharetra. Etiam posuere tempor sapien. Mauris pretium augue sapien, id vestibulum elit scelerisque a. Sed condimentum ligula mauris, in posuere metus ultricies eu. Quisque ac sem ut mauris finibus porta. Etiam sit amet aliquam odio, eu interdum tortor. Etiam ac porttitor nunc, quis elementum diam. Morbi nec vestibulum quam. Proin ultricies tempus tellus sit amet ultrices. Cras quam dolor, vestibulum non quam ut, rutrum tincidunt augue. Vestibulum et nisl elit.</li>
	<li> here is some text...
		<ol>
			<li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li>
			<li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li>
			<li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li>
			<li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li>
		</ol>
	</li>
</ol>
</div>

现在的问题是我的文字包裹在列表项目编号下，我不想要这个，我希望数字有一个列（就像我没有使用:before一样设置增量数）。我上传的图片显示内容如何包裹在数字下方。有没有人知道 的方式而不修改HTML结构（仅限CSS） 以防止换行？

请注意，如果我没有清楚地描述我的问题，请说出来，我将重新提出问题 - 非常感谢。

Answer 1

这可以通过在列表中使用display: table属性来完成。然后在display: table-cell上应用li:before以便在第二行提供缩进，依此类推。 display: table-row上的li，li文字与table-cell位于同一行。

添加CSS

ol{
  display: table;
}

li:before {
  display: table-cell;
}

li {
  display: table-row;
  // Add spacing to left as per requirement.
}

<强>段

    .container {
  background-color: #c7e8f7;
  border: 1px solid #00bcd4;
  width: 800px;
  padding: 5px;
}

ol {
  counter-reset: item;
  list-style-type: none;
  padding-left: 0px;
  display: table;
}

li {
  display: table-row;
}

li:before {
  content: counters(item, ".") ".";
  counter-increment: item;
  display: table-cell;
}


/* Add an indent to the sub ol*/

ol ol {
  padding-left: 10px;
}

<div class="container">
<ol>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis, interdum libero non, tincidunt dolor. Quisque vestibulum vitae augue eu tempus. Suspendisse nec enim mollis, auctor mi vitae, tincidunt lectus. Nullam interdum nisi at elit pretium, in tempus elit pharetra. Etiam posuere tempor sapien. Mauris pretium augue sapien, id vestibulum elit scelerisque a. Sed condimentum ligula mauris, in posuere metus ultricies eu. Quisque ac sem ut mauris finibus porta. Etiam sit amet aliquam odio, eu interdum tortor. Etiam ac porttitor nunc, quis elementum diam. Morbi nec vestibulum quam. Proin ultricies tempus tellus sit amet ultrices. Cras quam dolor, vestibulum non quam ut, rutrum tincidunt augue. Vestibulum et nisl elit.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis, interdum libero non, tincidunt dolor. Quisque vestibulum vitae augue eu tempus. Suspendisse nec enim mollis, auctor mi vitae, tincidunt lectus. Nullam interdum nisi at elit pretium, in tempus elit pharetra. Etiam posuere tempor sapien. Mauris pretium augue sapien, id vestibulum elit scelerisque a. Sed condimentum ligula mauris, in posuere metus ultricies eu. Quisque ac sem ut mauris finibus porta. Etiam sit amet aliquam odio, eu interdum tortor. Etiam ac porttitor nunc, quis elementum diam. Morbi nec vestibulum quam. Proin ultricies tempus tellus sit amet ultrices. Cras quam dolor, vestibulum non quam ut, rutrum tincidunt augue. Vestibulum et nisl elit.</li>
	<li> here is some text...
		<ol>
			<li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li>
			<li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li>
			<li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li>
			<li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li>
		</ol>
	</li>
</ol>
</div>

Answer 2

一种方法是在logger()元素的左侧提供一个特定的填充，然后将生成的<li>伪元素放在该空间中：

::before

/* This block is just to remove default padding
   and margin, and also to more easily assign
   width/height to elements: */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  background-color: #c7e8f7;
  border: 1px solid #00bcd4;
  width: 800px;
  padding: 5px;
}
ol {
  counter-reset: item;
  list-style-type: none;
}
li {
  /* padding the left of the <li>
     elements with 2em of 'empty space': */
  padding-left: 2em;
  /* setting the position to a non-'static'
     value, in order to position the
     pseudo-elements in relation to their
     closest <li>: */
  position: relative;
}
li:before {
  content: counters(item, ".")".";
  counter-increment: item;
  /* absolute positioning to remove the
     pseudo-element from the document
     flow, and to explicitly move them
     to the left-most edge: */
  position: absolute;
  left: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  background-color: #c7e8f7;
  border: 1px solid #00bcd4;
  width: 800px;
  padding: 5px;
}
ol {
  counter-reset: item;
  list-style-type: none;
  padding-left: 0px;
}
li {
  padding-left: 2em;
  position: relative;
}
li:before {
  content: counters(item, ".")".";
  counter-increment: item;
  position: absolute;
  left: 0;
}

当然，这种方法的主要问题是分配伪元素的“列”宽度的任意方式，具体取决于列表的相关性，它可能会进入{{1 }}不足以包含<div class="container"> <ol> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis, interdum libero non, tincidunt dolor. Quisque vestibulum vitae augue eu tempus. Suspendisse nec enim mollis, auctor mi vitae, tincidunt lectus. Nullam interdum nisi at elit pretium, in tempus elit pharetra. Etiam posuere tempor sapien. Mauris pretium augue sapien, id vestibulum elit scelerisque a. Sed condimentum ligula mauris, in posuere metus ultricies eu. Quisque ac sem ut mauris finibus porta. Etiam sit amet aliquam odio, eu interdum tortor. Etiam ac porttitor nunc, quis elementum diam. Morbi nec vestibulum quam. Proin ultricies tempus tellus sit amet ultrices. Cras quam dolor, vestibulum non quam ut, rutrum tincidunt augue. Vestibulum et nisl elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis, interdum libero non, tincidunt dolor. Quisque vestibulum vitae augue eu tempus. Suspendisse nec enim mollis, auctor mi vitae, tincidunt lectus. Nullam interdum nisi at elit pretium, in tempus elit pharetra. Etiam posuere tempor sapien. Mauris pretium augue sapien, id vestibulum elit scelerisque a. Sed condimentum ligula mauris, in posuere metus ultricies eu. Quisque ac sem ut mauris finibus porta. Etiam sit amet aliquam odio, eu interdum tortor. Etiam ac porttitor nunc, quis elementum diam. Morbi nec vestibulum quam. Proin ultricies tempus tellus sit amet ultrices. Cras quam dolor, vestibulum non quam ut, rutrum tincidunt augue. Vestibulum et nisl elit.</li> <li>here is some text... <ol> <li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li> <li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li> <li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li> <li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li> </ol> </li> </ol> </div>的列表项编号;所以这可能是一个脆弱的解决方案。虽然你可以，用：

显式设置这些元素的样式

2em

将计数器放在这些元素的内容之上（或做其他可能更适合您设计约束的事情）。