Question

有关编号在有序列表中的垂直位置的问题：如果<li>元素仅包含浮动div，则将数字推到基线。有什么办法可以防止这种情况？我希望数字在顶部对齐。

这是小提琴：

ol { 
  margin: 0 2em;
  list-style: decimal outside; 
}

li { 
  margin-bottom: 0.25em;
  border: 1px solid red;
}

li::after {
  content: '';
  display: table;
  clear: both;
}

div { 
  float: left; 
  height: 3em;
  background: lightgrey;
}

<ol>
  <li>
    <div>one two</div>
  </li>
  <li>
    <div>one two three four five</div>
  </li>
</ol>

谢谢！

编辑：我无法使用css计数器，因为该页面将转换为不支持css计数器的pdf。

Answer 1

列表样式在CSS中非常有限。使用list-style-position时，您只能使用inside或outside，而不能设置样式。绕过这种情况的一种方法是使用CSS计数器。

ol { 
  list-style: none; /* removes the current list numbers */
  counter-reset: list; /* creates a new counter */
}

li { 
  position: relative; /* make relative, so we can position the number absolutely */
}

li:before {
  counter-increment: list; /* increment the counter by 1 */
  content: counter(list)'.'; /* output the counter, with a dot at the end */
  position: absolute; /* the rest is positioning and styling */
  right: 100%;
  margin-right: 5px;
  top: 0;
}

工作示例：https://jsfiddle.net/zxar91jf/

CSS：编号在有序列表中的垂直位置

1 个答案: