CSS列表项与之前并排[重复]答案

【问题标题】：CSS list item with before side by side [duplicate]CSS列表项与之前并排[重复]
【发布时间】：2021-10-03 12:43:52
【问题描述】：

我在一个列表中有 3 个项目，在每个项目之前显示列表项目编号，并且假设比实际文本大，我把那部分记下来了，现在我试图让它们并排显示。

这是我的代码：

.columnStyle {
  column-count: 3;
  display: flex;
  justify-content: center;
  position: relative;
}

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

.columnStyle ol li {
  float: left;
  width: 33.3333%;
  padding: 35px;
  display: block;
  color: black;
}

.columnStyle ol li:before {
  content: counter(item) "  ";
  counter-increment: item;
  color: #ce9c1f;
  font-size: 8em;
  font-weight: bold;
  text-transform: uppercase;
  display: block;
}

<div class="columnStyle">
  <ol>
    <li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
    <li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
    <li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
  </ol>
</div>

这里也是个jsfiddle：

https://jsfiddle.net/vL5an1ox/

如何在其文本旁边获取数字 1 并使文本垂直居中对齐？

【问题讨论】：

标签： html css

【解决方案1】：

你可以把display: flex转成.columnStyle ol li

.columnStyle {
  column-count: 3;
  display: flex;
  justify-content: center;
  position: relative;
}

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

.columnStyle ol li {
  float: left;
  width: 33.3333%;
  padding: 35px;
  color: black;
  display: flex;
  align-items: center;
}


.columnStyle ol li:before {
  content: counter(item) "  ";
  counter-increment: item;
  color: #ce9c1f;
  font-size: 8em;
  font-weight: bold;
  text-transform: uppercase;
  display: block;
}

<div class="columnStyle">
  <ol>
    <li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
    <li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
    <li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
  </ol>
</div>

【讨论】：

【解决方案2】：

使用 display:flex; 和 align-items: center; 更新你的 li 元素 CSS

只需更新您的 CSS

.columnStyle ol li {
    float: left;
    width: 33.3333%;
    padding: 35px;
    display: flex;
    color: black;
    align-items: center;
}

【讨论】：

【解决方案3】：

你可以使用display: flex;来做到这一点

.columnStyle {
  column-count: 3;
  display: flex;
  justify-content: center;
  position: relative;
}

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

.columnStyle ol li {
  float: left;
  width: 33.3333%;
  padding: 35px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  color: black;
}

.columnStyle ol li::before {
  content: counter(item) "  ";
  counter-increment: item;
  color: #ce9c1f;
  font-size: 8em;
  font-weight: bold;
  text-transform: uppercase;
  display: block;
  margin-right: 10px;
}

<div class="columnStyle">
  <ol>
    <li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
    <li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
    <li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
  </ol>
</div>

【讨论】：

【解决方案4】：

要使其完全居中，除了在.columnStyle ol li 上设置display: flex 和align-items: center（即padding-top: .1em 和line-height: 1em 在.columnStyle ol li:before 上）之外，您还需要进行一些调整。将float 替换为flex 是有意义的。

.columnStyle {
  column-count: 3;
  display: flex;
  justify-content: center;
  position: relative;
}

.columnStyle ol {
  display: flex;
  padding: 0px;
  counter-reset: item;
  list-style-type: none;
}

.columnStyle ol li {
  width: 33.3333%;
  padding: 10px;
  display: flex;
  align-items: center;
  color: black;
}

.columnStyle ol li:before {
  content: counter(item) "  ";
  counter-increment: item;
  color: #ce9c1f;
  padding-top: .1em;
  font-size: 8em;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-block;
  line-height: 1em;
}

<div class="columnStyle">
  <ol>
    <li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
    <li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
    <li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
  </ol>
</div>

【讨论】：