CSS列表项与before并排

Question

我在一个列表中有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旁边的文本，并有文本垂直对齐的中间?

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

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

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

Answer 4

为了让它完全居中，你需要做一些调整，除了在.columnStyle ol li上设置display: flex和align-items: center，在.columnStyle ol li:before上设置padding-top: .1em和line-height: 1em，当你在这里的时候，用flex代替float是有意义的。

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