CSS li 边距顶部不起作用无法放下 li

Question

我本来想把红色圆圈放在Sadon Huguet线的正旁边，但他被卡在了10像素以上，而且它没有完全对齐，我试了很多方法，但似乎都不起作用。感谢您抽出时间

.vins_wino {
margin-top: 25px;
padding-right: 18px;
color: black;
}
.vin_wino {
font-size: 17px;
font-style: normal;
font-weight: normal;
border-bottom: dashed black;
border-bottom-width: 1px;
height: 30px;
position: absolute;
left: 8%;
}
.type_wino {
width: 30px;
height: 30px;
border-radius: 50%;
margin-top: 5.5px;
border: 2px solid black;
display: flex;
justify-content: space-between;
}
.price_wino {
font-weight: bold;
position: absolute;
right: 0;
margin-right: 20px;

<ol class="vins_wino" style="list-style-type: none;">
<li class="type_wino" style="background-color: #ac1e44;"></li>
<li class="vin_wino">Domaine Chapel - Fleurie Charbonnières 2018, 0,75L</li>
<li class="price_wino">29 €</li>
</ol>

Answer 1

您也可以使用pseudo-element::before来完成此操作。

CSS中的::before和::after伪元素允许您将内容插入到页面上，而无需将其插入HTML中。

伪元素适用于ul和ol的自定义项目符号。

• 点击此处阅读更多

.vins_wino {
margin-top: 25px;
padding-right: 18px;
color: black;
}
.vin_wino {
font-size: 17px;
font-style: normal;
font-weight: normal;
border-bottom: dashed black;
border-bottom-width: 1px;
height: 30px;
position: absolute;
left: 8%;
}
li.vin_wino::before {
content: "";
background-color: #ac1e44;
position: absolute;
left: -2.5em;
bottom: 0;
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid black;
}
.price_wino {
font-weight: bold;
position: absolute;
right: 0;
margin-right: 20px;
}

<ol class="vins_wino" style="list-style-type: none;">
<li class="type_wino"></li>
<li class="vin_wino">Domaine Chapel - Fleurie Charbonnières 2018, 0,75L</li>
<li class="price_wino">29 €</li>
</ol>

Answer 2

使用flex：

.vins_wino {
margin-top: 25px;
padding-right: 18px;
color: black;
display: flex;
}
.type_wino {
width: 30px;
height: 30px;
border-radius: 50%;
margin-top: 5.5px;
border: 2px solid black;
padding-right: 0;
}
.vin_wino {
font-size: 17px;
font-style: normal;
font-weight: normal;
border-bottom: dashed black;
border-bottom-width: 1px;
height: 30px;
margin-top: 9px;
margin-left: 5px;
}
.price_wino {
font-weight: bold;
flex: auto;
text-align: end;
margin-top: 5px;
}

<ol class="vins_wino" style="list-style-type: none;">
<li class="type_wino" style="background-color: #ac1e44;">
<li class="vin_wino">Domaine Chapel - Fleurie Charbonnières 2018, 0,75L</li>
<li class="price_wino">29 €</li>
</li>
</ol>