リストタグで長さの違う要素を合わせる

今回はリストタグで長さの違う要素を合わせる方法ご紹介いたします。

サンプル

リスト1~4とリスト5の両端をピッタリ合わせています。

サンプル

html

今回はよくありそうなので、liの中にaタグを入れてみました。

ポイントは「</li><!– –><li>」です。liには余分な空白があるのでコメントアウト文で消去します。

css

解説1

横並びのために「display: inline-block;」を使用しています。

「box-sizing: border-box;」でパディングをボックスに含めています。

解説2

「li:nth-child(even)」で偶数番目にあたるliの要素を右方向へピッタリ合わせています。

解説3

「li:last-child」で最後のリスト要素の幅をいっぱいにしています。

解説4

li内でa要素がいっぱいになるように幅をとっています。ここでも、「box-sizing: border-box;」を使用しています。

全ソース

まとめ

  • コメントアウト文でliの余分な空白を消去している。
  • 「display: inline-block;」で横並びにしている。
  • 「box-sizing: border-box;」でパディングをボックスに含めている。
  • 「li:nth-child(even)」と「li:last-child」で長さを調整している。
スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

リストタグで長さの違う要素を合わせる
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!