css - 水平リストの最初のアイテムは左にフロートし、残りのアイテムは右に整列します

Question

次のHTMLがあり、最初のアイテムを左に揃え、残りの3つのアイテムをグループとして右に揃えたいと思います。

これらの3つでfloat：rightを使用したくないのは、HTMLで誤った順序で表示される必要があるためです。

2番目のリストアイテムにマージン左を適用して、常にそれ自体と3つのグループを右に強制する方法はありますか？添付の画像を参照してください。

<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>