水平列表中的第一个项目向左浮动，其余项目向右对齐

Question

我有以下HTML，我希望第一个项目与左边对齐，然后剩余的三个项目作为一个组对齐右边。

我不想在这三个上使用float：因为它们必须在HTML中以不正确的顺序出现。

有没有办法在第二个列表项中应用margin-left，以便它总是强制自己和三个组合在右边？参见附图以供参考。

<ul class="overview">
  <li class="title">Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
</ul>

Answer 1

如果语义对您来说并不重要，那么您可以使用table。

Answer 2

看起来你的列表周围会有一个容器元素。如果是这样，以下内容可能会满足您的需求。

<style type="text/css">
    .container {
        position: relative;
        width: 600px;
        padding: 10px;
        border: 1px solid #f00;
    }
    .overview {
        text-align: right;
        margin: 0;
        padding: 0;
    }
    .overview li {
        display: inline;
        width: 100px;
        height: 20px;
        border: 1px solid #000;
        text-align: left;
    }
    .overview li.title {
        position: absolute;
        left: 10px;
    }
</style>

<div class="container">
    <ul class="overview">
        <li class="title">Some text</li>
        <li>Some text</li>
        <li>Some text</li>
        <li>Some text</li>
    </ul>
</div>