リストを横並び表示して枠線を付けた時に項目同士の線が太くなるのを防ぐ方法

以下のページでタブ切り替え式のコンテンツの作り方を公開しました。そこではタブ同士を離しているので気にならなかったのですが、タブ同士を隙間なく配置した時にタブの境界線が太く（2倍）になってしまうのに対処したメモページです。

標準のブロックと少量のコードでタブ切り替えコンテンツを作る方法

タブに限らず、リストタグなどを使い、display:flexを使って横並びにすることってありますよね。

ちょうど以下のような形です。

<ul class="flex-1">
<li>リスト項目１</li>
<li>リスト項目２</li>
</ul>

<style>
ul.flex-1 {
    list-style: none;
    display: flex;
    padding-left: 0;
}

.flex-1 li{
border:4px solid #000;
}
</style>

このコードをカスタムHTMLブロックへ入れて表示させると以下のようになります。

• リスト項目１
• リスト項目２

わざと枠線（border）を太くしているので一目瞭然ですね。隣り合うリストの左右の線が両方表示され、単純に倍の太さになっています。

これをCSSで解消させるには、以下のようにするとよいようです（実際に改善されていますが、その他どこかに影響があるかは不明です）。

• リストタグ（li）の左に枠線の太さと同じサイズのネガティブマージン（マイナスのマージン）を与える
• そのままだと最初のリストタグの左にもマイナスマージンがかかってしまうので、リスト（ul）自体を枠線の太さと同じサイズだけマージンで寄せる

具体的には以下のように書きます。

<ul class="flex-2">
<li>リスト項目１</li>
<li>リスト項目２</li>
</ul>

<style>
ul.flex-2 {
    list-style: none;
    display: flex;
    padding-left: 0;
}

.flex-2 li{
border:10px solid #000;
}

.flex-2 li {
    margin-left: -10px;
}

ul.flex-2 {
    margin-left: 10px;
}
</style>

以下で実際に表示させていますので確認ください。

• リスト項目１
• リスト項目２

きちんとタブの左右の枠線とその他の線の太さが合っていますね。

WordPressに限らず、通常のHTMLでも使えるテクニックなので覚えておくといいと思います。