CSS を使用して複数の方法で等幅レイアウトを実装するサンプルコード

<スタイル>
    本文、div{
        マージン: 0;
        パディング: 0;
    }
    .テーブルレイアウト{
        display: table;/*親要素はtableに設定する必要があります*/
        table-layout: fixed;/*この属性は必ず存在する必要があります。存在しない場合、効果は得られません*/
        幅: 50%;
        マージン: 20px 自動;
    }
    .テーブルセルレイアウト{
        display: table-cell;/*子要素はtable-cellに設定する必要があります*/
        高さ: 40px;
        境界線: 1px 実線 #666;
        左境界線: なし;
    }
    .table-cell-layout:最初の子{
        左境界線: 1px 実線 #666;
    }
</スタイル>

<本文>
    <ul class="テーブルレイアウト">
        <li class="table-cell-layout">li1</li>
        <li class="table-cell-layout">li2</li>
        <li class="table-cell-layout">li3</li>
        <li class="table-cell-layout">li4</li>
        <li class="table-cell-layout">li5</li>
    </ul>
</本文>

<スタイル>
    本文、div{
        マージン: 0;
        パディング: 0;
    }
    .flex-レイアウト{
        ディスプレイ: フレックス;
        幅: 50%;
        マージン: 20px 自動;
    }
    .flex-item{
        フレックス: 1;
        高さ: 40px;
        境界線: 1px 実線 #666;
        左境界線: なし;
    }
    .flex-item:最初の子{
        左境界線: 1px 実線 #666;
    }
</スタイル>

<本文>
    <ul class="flex-layout">
        <li class="flex-item">li1</li>
        <li class="flex-item">li2</li>
        <li class="flex-item">li3</li>
        <li class="flex-item">li4</li>
        <li class="flex-item">li5</li>
    </ul>
</本文>