html - 在进度条内对齐文本

Question

我试图在一些进度条中将一些文本左右对齐，右侧以书面形式写下完成百分比，左侧是主题的标题。我确信这是一个简单的修复，但我无法将文本移到右侧，同时将一些文本保留在左侧，所有文本都在同一行上。

我试过像这样对齐单独的跨度:

<div class="progress" style="width:40%">
    <span class="subject">Subject One</span><span class="percent">40/100</span>
</div>

/* styles */
.subject { text-align: left; }
.percent { text-align: right; }

但内联元素似乎并不关心它们的文本对齐方式。然而，当我将其中一个设为 block 时，它会转到不同的行。

这是代码片段:

ul {
  list-style-type: none;
}

li {
  width: 100%;
  border-bottom: 1px solid #ebebeb;
}

li .completion {
  background-color: #dbdbdb;
  padding: 20px;
}

.completion .subject {
  text-align: left;
}

.completion .percent {
  text-align: right;
}

<ul>
  <li>
    <div class="completion" style="width: 60%"><span class="subject">Thing One</span><span class="percent">60/100</span></div>
  </li>
  <li>
    <div class="completion" style="width: 40%"><span class="subject">Thing Two</span><span class="percent">40/100</span></div>
  </li>
</ul>

非常感谢任何帮助!谢谢。

为了澄清，我希望文本一直对齐到列表项本身的右侧，而不仅仅是在完成 div 中

Answer 1

如果你想完全对齐，你可以使用绝对定位。为 li 元素指定一个 relative 定位，为 .percent 指定一个 absolute 位置，不要忘记放置它在右边，所以也插入 right: 0。添加右边距，如果它太靠近栏的末尾。

代码片段:

ul {
  list-style-type: none;
}

li {
  width: 100%;
  border-bottom: 1px solid #ebebeb;
  position: relative;
}

li .completion {
  background-color: #dbdbdb;
  padding: 20px;
}

.completion .subject {
  text-align: left;
}

.completion .percent {
  position: absolute;
  right: 0;
  margin-right: 20px;
}

<ul>
  <li>
    <div class="completion" style="width: 60%"><span class="subject">Thing One</span><span class="percent">60/100</span></div>
  </li>
  <li>
    <div class="completion" style="width: 40%"><span class="subject">Thing Two</span><span class="percent">40/100</span></div>
  </li>
</ul>