Float语句正在破坏块级元素

Question

我试图使I rate it ??/??在中心完全对齐，并在左侧浮动，这样I rate it ??/??单词将具有完美的垂直形状。当我这样做时，float语句会破坏块级元素并超出它

li {
display: block;
background: green;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
padding: 20px 0px 20px 10px;
}
span.rate {
color: #fff;
margin-right: 65px;
padding: 20px 10px;
float: right;
background: rgb(10, 10, 10);
}

<ol>
<li>Text1<span class="rate">I rate it 10/10</span></li>
<li>Text2 Text Text Text Text Text<span class="rate">I rate it 6/10</span></li>
<li>Text5<span class="rate">I rate it 9/10</span></li>
<li>Text9 Text Text<span class="rate">I rate it 2/10</span></li>
</ol>

这里是另一个例子，但没有float语句。它看起来很完美，但如果没有float: right;语句，它就根本没有垂直对齐。它不像第一个那样完美对齐：

li {
display: block;
background: green;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
padding: 20px 0px 20px 10px;
}
span.rate {
color: #fff;
margin-right: 65px;
padding: 20px 10px;
background: rgb(10, 10, 10);
}

<ol>
<li>Text1<span class="rate">I rate it 10/10</span></li>
<li>Text2 Text Text Text Text Text<span class="rate">I rate it 6/10</span></li>
<li>Text5<span class="rate">I rate it 9/10</span></li>
<li>Text9 Text Text<span class="rate">I rate it 2/10</span></li>
</ol>

最后。我希望I rate it ??/??是：

1-完全垂直对齐

2-完全适合块级元素内部

Answer 1

您可以混合display: flex;和position: absolute;来实现

li {
display: flex;
background: green;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
padding: 20px 0px 20px 10px;
justify-content: flex-start;
align-items: center;
}
span.rate {
color: #fff;
position: absolute;
right: 0;
padding: 20px 10px;
background: rgb(10, 10, 10);
width: 11ch;
}

<ol>
<li>Text1<span class="rate">I rate it 10/10</span></li>
<li>Text2 Text Text Text Text Text<span class="rate">I rate it 6/10</span></li>
<li>Text5<span class="rate">I rate it 9/10</span></li>
<li>Text9 Text Text<span class="rate">I rate it 2/10</span></li>
</ol>

---

编辑：

为了避免隐藏文本，您也可以使用display: grid;

li {
display: grid;
grid-template-columns: 1fr 11ch;
background: green;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
padding-left: 10px ;
justify-content: flex-start;
align-items: center;
}
span.rate {
color: #fff;
padding: 10px 0 10px;
background: rgb(10, 10, 10);
width: 12ch;
height: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}

<ol>
<li>Text1<span class="rate">I rate it 10/10</span></li>
<li>Text2 Text Text Text Text Text<span class="rate">I rate it 6/10</span></li>
<li>Text5<span class="rate">I rate it 9/10</span></li>
<li>Text9 Text Text azlkejalzkje alkjez alkzj ealk zjeal zkjeal kzjea lzkej  eazmlk emalkz emaklz emlkaz melkaz emlkaz emlka zemlk 12345678<span class="rate">I rate it 2/10</span></li>
</ol>

Answer 2

您可以使用flexbox来解决您的问题。设置display: flex以使元素使用flexbox，然后设置justify-content: space-between;(最大化元素之间的空间(&align-items: center;(元素水平居中(

li {
display: flex;
background: green;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
padding: 0px 0px 0px 10px;
justify-content: space-between;
align-items: center;
}
span.rate {
color: #fff;
margin-right: 65px;
padding: 20px 10px;
background: rgb(10, 10, 10);
}

<ol>
<li>Text1<span class="rate">I rate it 10/10</span></li>
<li>Text2 Text Text Text Text Text<span class="rate">I rate it 6/10</span></li>
<li>Text5<span class="rate">I rate it 9/10</span></li>
<li>Text9 Text Text<span class="rate">I rate it 2/10</span></li>
</ol>

Answer 3

您可以使用absolute&相对定位。通过这种方式，您可以最大限度地控制定位，并确保高度始终为100%。简单干净。

li {
display: block;
background: green;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
padding: 20px 0px 20px 10px;
position: relative;
}
span.rate {
color: #fff;
margin-right: 65px;
padding: 20px 10px;
background: rgb(10, 10, 10);
position: absolute;
right: 0;
top: 0;
bottom: 0;
}

<ol>
<li>Text1<span class="rate">I rate it 10/10</span></li>
<li>Text2 Text Text Text Text Text<span class="rate">I rate it 6/10</span></li>
<li>Text5<span class="rate">I rate it 9/10</span></li>
<li>Text9 Text Text<span class="rate">I rate it 2/10</span></li>
</ol>