html - float 语句破坏了 block 级元素？

Question

我正在尝试制作 I rate it ??/??完美地居中对齐并 float 在左侧，因此 I rate it ??/??单词将具有完美的垂直形状。当我这样做时，float 语句会破坏 block 级元素并超出它。这是一个例子:

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- 完美适合 block 级元素。

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>