使用 :before 增加帶有子列表的計數器時，防止列表項文本在 item 下換行

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屬性來完成。 然后在li:before上應用display: table-cell以在第二行提供縮進，依此類推。 display: table-row on 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

一種方法是在<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; }

 <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不足以包含1.4.2.4.baiii的列表項編號； 所以這可能是一個脆弱的解決方案。 盡管您可以使用以下方式顯式設置這些元素的樣式：

li li li li li li li::before {
    position: static;
    display: block;
}

將計數器放在這些元素的內容上方（或做任何其他可能更適合您的設計約束的事情）。