html - 向右浮动，向左对齐列表中的元素

Question

我正在尝试创建一个导航，其中元素名称在左侧，状态在右侧。我想将这两个元素保留在同一个列表中，但我的问题是我无法将状态文本向右浮动并仍然向左对齐。

这是我想要创建的

这是我当前的 HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="col-xs-4">
  <p class="list-title">Blueprint</p>
  <ul>
    <li><a href="#">Executive Summary <span>Dean Approved</span></a></li>
    <li><a href="#">Mission, Vision, Values <span>In Progress</span></a></li>
    <li><a href="#">Unit Goal Management <span>In Progress</span></a></li>
  </ul>

  <p class="list-title">Outcomes</p>
  <ul>
    <li><a href="#">Goal Outcomes <span>Dean Approved</span></a></li>
    <li><a href="#">Academic Intivates <span>Dean Approved</span></a></li>
    <li><a href="#">Faculty Information <span>In Progress</span></a></li>
    <li><a href="#">Teaching <span>Dean Approved</span></a></li>
    <li><a href="#">Student Recruiting &amp; Retention <span>Pending Dean Approval</span></a></li>
    <li><a href="#">Faculty Award Nomination <span>Pending Dean Approval</span></a></li>
    <li><a href="#">Faculty Awards <span>In Progress</span></a></li>
    <li><a href="#">Community Engagement <span>Dean Rejected</span></a></li>
    <li><a href="#">Collaborations <span>In Progress</span></a></li>
    <li><a href="#">Campus Climate &amp; Inclusion <span>Not started</span></a></li>
    <li><a href="#">Concluding Remarks <span>Not started</span></a></li>
  </ul>
</nav>

我将跨度向右浮动，但之后我无法将其左对齐。我试过有两个列表，一个有名字，一个有状态。这一直有效，直到我尝试添加悬停或事件状态。

我觉得我遗漏了一些明显的东西，但我似乎无法弄明白。任何帮助是极大的赞赏。谢谢

Answer 1

跨度中的文本在技术上是左对齐的，即使在向右浮动之后，只是跨度的宽度仅与文本一样宽。所以左对齐、右对齐、居中对齐看起来都一样。在跨度上设置最小宽度，您将能够控制文本对齐方式。像这样的东西:

ul > li > a > span {
    float: right;
    min-width: 200px;
    /* text-align: left */ /* it's left by default */
}