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

技術情報

2016.02.162017.03.28

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

サンプル
html
css
全ソース
まとめ

サンプル

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

サンプル

html

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

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

<ul class="match">
    <li><a href="#">リスト1</a></li><!--
    --><li><a href="#">リスト2</a></li><!--
    --><li><a href="#">リスト3</a></li><!--
    --><li><a href="#">リスト4</a></li><!--
    --><li><a href="#">リスト5</a></li>
</ul>

css

ul.match li {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    box-sizing: border-box;
    padding: 0 10px 10px 0;
}

ul.match li:nth-child(even) {
    padding-right: 0;
}

ul.match li:last-child {
    width: 100%;
    padding-right: 0;
}

ul.match li a {
    display: block;
    width: 100%;
    padding: 10px;
    color: #FFF;
    text-decoration: none;
    background: #3C7DD1;
    box-sizing: border-box;
}

解説1

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

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

ul.match li {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    box-sizing: border-box;
    padding: 0 10px 10px 0;
}

解説2

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

ul.match li:nth-child(even) {
    padding-right: 0;
}

解説3

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

ul.match li:last-child {
    width: 100%;
    padding-right: 0;
}

解説4

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

ul.match li a {
    display: block;
    width: 100%;
    padding: 10px;
    color: #FFF;
    text-decoration: none;
    background: #3C7DD1;
    box-sizing: border-box;
}

全ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>
    リストタグで長さの違う要素を合わせる
</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style type="text/css">
body {
    text-size-adjust: 100%;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.match li {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    box-sizing: border-box;
    padding: 0 10px 10px 0;
}

ul.match li:nth-child(even) {
    padding-right: 0;
}

ul.match li:last-child {
    width: 100%;
    padding-right: 0;
}

ul.match li a {
    display: block;
    width: 100%;
    padding: 10px;
    color: #FFF;
    text-decoration: none;
    background: #3C7DD1;
    box-sizing: border-box;
}
</style>
</head>
<body>

    <ul class="match">
        <li><a href="#">リスト1</a></li><!--
        --><li><a href="#">リスト2</a></li><!--
        --><li><a href="#">リスト3</a></li><!--
        --><li><a href="#">リスト4</a></li><!--
        --><li><a href="#">リスト5</a></li>
    </ul>

</body>
</html>

まとめ

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