带样式的有序列表多行对齐

Question

我正在使用 CSS 计数器来设计 OL。

.custom-ol {
  margin-left: 0;
  padding-right: 0;
  list-style-type: none;
}
.custom-ol li {
  counter-increment: step-counter;
}
.custom-ol li::before {
  content: counter(step-counter);
  margin-right: 5px;
  font-size: 80%;
  background-color: rgb(200, 200, 200);
  color: white;
  font-weight: bold;
  padding: 5px 8px;
  border-radius: 10px;
  line-height: 26px;
}

<ol class="custom-ol">
  <li>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</li>
  <li>Blah Blah Blah</li>
  <li>Blah Blah Blah Blah Blah Blah Blah Blah Blah</li>
  <li>Blah Blah</li>
</ol>

样式本身工作正常，但是我运行在列表项长于父容器宽度的情况下遇到样式问题：li 的第二个字符串环绕 li::before 元素而不是与第一个字符串处于同一级别。

如何让它像普通的 ol 物品一样工作？

我试图将 margin-bottom 属性添加到 li::before 但它没有做任何事情来获得正确的对齐方式。

Answer 1

一种方法是绝对定位伪元素，相对于包含 li。这将需要 ol 左侧的一些 margin 或 padding 以允许 space 作为伪元素。

.custom-ol {
  margin-left: 0;
  padding-left: 40px; /*Add this*/
  padding-right: 0;
  list-style-type: none;
}
.custom-ol li {
  counter-increment: step-counter;
  line-height: 26px; /*Move line-height to here*/
  position: relative; /*Add this*/
}
.custom-ol li::before {
  content: counter(step-counter);
  margin-right: 5px;
  font-size: 80%;
  background-color: rgb(200, 200, 200);
  color: white;
  font-weight: bold;
  padding: 5px 8px;
  border-radius: 10px;
  line-height: 1em; /*Reset the line-height set on the li*/
  position: absolute; /*Add this*/
  right: 100%; /*Add this*/
  top: 0; /*Add this*/
}

<ol class="custom-ol">
  <li>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</li>
  <li>Blah Blah Blah</li>
  <li>Blah Blah Blah Blah Blah Blah Blah Blah Blah</li>
  <li>Blah Blah</li>
</ol>

Answer 2

你的 li::before 本质上是内联内容，尝试给它一些 space 放在边距中（或填充行以在 li 上创建一个 space 允许形成一段矩形文本。您可以根据需要设置 ::before 的位置（浮动、内联、绝对定位块等）

尝试例如这个：

.custom-ol {
    margin-left: 0;
    padding-right: 0;
    list-style-type: none;
}
.custom-ol li {
    counter-increment: step-counter;
    margin-left: 3em; 
    position:relative;
    min-height: 1.8em;
    
}
.custom-ol li::before {
    content: counter(step-counter);
    font-size: 80%;
    background-color: rgb(200,200,200);
    color: white;
    font-weight: bold;
    width: 1.5em;
    height:1.5em;
    border-radius: 0.75em;
    line-height: 1.5em;
    text-align: center;
    display: block;
    position: absolute;
    left:-2.5em;  
}

   <ol class="custom-ol">
    <li>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah </li>
    <li>Blah Blah Blah </li>
    <li>Blah Blah Blah Blah Blah Blah Blah Blah Blah </li>
    <li>Blah Blah </li>
   </ol>

它使 ::before 成为一个直径为 1.5em 的圆，并将其定位在 li 本身创建的边距之外。 li 也被赋予了最小高度以确保 ::before 元素不重叠或接触。

Answer 3

将一些 text-indent 应用到 .custom-ol li，也许是负值。

阅读 this 示例。

带样式的有序列表多行对齐

Styled ordered list multi-row alignment

html

css

html-lists