样式有序列表多行对齐

Question

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

样式本身工作正常，但是当列表项长于父容器宽度时，我遇到了样式问题：li的第二个字符串包裹li::before元素而不是与第一个字符串处于同一级别。

如何让它像普通的ol项一样？

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

Answer 1

将一些text-indent应用于.custom-ol li，可能带有负值。

阅读this以获取示例。

Answer 2

一种方法是相对于包含li绝对定位伪元素。这将需要margin左侧的一些padding或ol，以便为伪元素留出空间。

.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 3

你的li ::之前是essentailly内联内容，尝试给它一些空间来坐在边缘（或填充线以在li上创建一个允许形成矩形文本的空间。你可以然后根据你的喜好定位::之前（浮点数，内联，绝对定位块等）

尝试例如这样：

.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>

它使得在1.5em直径的圆之前的::并将它定位在li本身的边缘之外。 li也被赋予最小高度以确保:: before元素不重叠或触摸。