一切似乎都正常工作，但只要我在或标记内创建粗体文本，就会忽略单词之间的空格，因为我使用的是Flex。
我在标记上尝试了所有可能的justify-content，但没有找到解决方案。
HTML:
<div class="bullets">
<ul>
<li><strong>100X</strong> More Powerful</li>
<li>Say <strong>No</strong> To Plastic</li>
<li>Fits <strong>99.9%</strong> On The Market</li>
<li>Saves Approximately <strong>8 Hours A Year</strong></li>
<li>Durable Like <strong>$3,000</strong> Worth</li>
</ul>
</div>
CSS:
.bullets {
display: flex;
flex-flow: column wrap;
font-size: 18px;
ul {
list-style: none;
li {
display: flex;
align-items: center;
padding-left: 16px;
}
li:not(:first-of-type) {
margin-top: 15px;
}
li:before {
content: "";
background-image: url('https://cdn.shopify.com/s/files/1/0493/4605/2261/files/checkmark.svg?v=1600908500');
background-size: 24px 21px;
margin-left: -16px;
width: 24px;
height: 21px;
margin-right: 10px;
}
}
}
https://jsfiddle.net/z2r6j4ts/
你可以用一个空隙
null
.bullets {
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-flow: column wrap;
font-size: 18px;
}
.bullets ul {
list-style: none;
}
.bullets ul li {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
padding-left: 16px;
gap: 0.25em;
}
.bullets ul li:not(:first-of-type) {
margin-top: 15px;
}
.bullets ul li:before {
content: "";
background-image: url("https://cdn.shopify.com/s/files/1/0493/4605/2261/files/checkmark.svg?v=1600908500");
background-size: 24px 21px;
margin-left: -16px;
width: 24px;
height: 21px;
margin-right: 10px;
} <div class="bullets">
<ul>
<li><strong>100X</strong> More Powerful</li>
<li>Say <strong>No</strong> To Plastic</li>
<li>Fits <strong>99.9%</strong> On The Market</li>
<li>Saves Approximately <strong>8 Hours A Year</strong></li>
<li>Durable Like <strong>$3,000</strong> Worth</li>
</ul>
</div>
在CSS代码中添加以下行:
li>；strong{margin:0 2px；}
您可以添加以下代码使间距正常工作:
li {
strong {
margin: 0 .25rem;
}
}
