Help us understand the problem. What is going on with this article?

CSSで要素を横に並べる主な3つのやり方(ブラウザ対応表のおまけつき)

More than 1 year has passed since last update.

はじめに

 本記事では ul > li でリスト要素を作ったときによしなに横に並べてもらう方法について見ていきます。

できるもの

 見た目的にはこんな感じ。
スクリーンショット 2015-09-26 15.02.01.png

 タイトルではこんな風にいってますが、実は6つのやり方があります。

 この記事ではその中でも私がよく見てきたやり方に絞ってご紹介します。

基本のhtml

基本となるhtmlのソースは以下のindex.htmlです。これをCSSで飾っていきます。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>ぐろーばるめにぅ〜</title>
</head>
<body>
  <h3></h3>
  <ul class = "foo">
    <li><a href="#">HOME</a></li>
    <li><a href="#">page1</a></li>
    <li><a href="#">page2</a></li>
    <li><a href="#">page3</a></li>
    <li><a href="#">page4</a></li>
  </ul>
</body>
</html>

主なやり方

 以下の実装方法について簡単にご紹介します。
1. display: inline-block での実装
2. display: table-cell  での実装
3. float        での実装

display: inline-block

メリット:inline なのに block なので、padding, margin をキッチリ設定できる。ソース読みやすい。
デメリット: widthで設定した中でli要素をうまいことやりくりせねばならない(borderつけるなら余計に)

displayの説明はとほほさんにゆずるとして……。
この例では inline-block という値で設定しています。
以下参考ソースです。

inline-box.css
ul.foo {
  width: 600px;
  border:1px solid red;
  padding:0;
  font-size:0px;
}

ul.foo li {
  width:118px;
  border:1px solid black;
  display: inline-block;
  text-align: center;
  font-size:16px;
}

ul.foo li:first-child {
  height:60px;
}

ul.foo li a {
  display: block;
}

display: table-cell

 メリット:配置関連をよしなにやってくれます。便利です。
 デメリット:対応ブラウザ(IE8以上とか)が限られます。後述の表にまとめていますが、レガシーブラウザ対応する方はご注意。

table-cell.css
ul.foo {
    display:table;
    table-layout:fixed;
    width:500px;
    padding-bottom: 40px;
}
ul.foo li {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    background-color:red;
    border-left:1px solid white;
}
ul.foo li:first-child {
    border:none;    
}
ul.foo li a {
    display:block;
    text-decoration:none;
    color:white;
}

float:left & clearfix

 メリット:上二つよりは効くブラウザが多い
 デメリット:ソースと概念がちょっぴり複雑

 float:leftで回り込みが利きます。それを利用して横並びにしていきます。
 このパターンだけ、htmlすらも変わります。

float.html
  <div class="clearfix box_wrap">
    <div class="box_left">
        左寄せ1
    </div>
    <div class="box_left">
        左寄せ2
    </div>
    <div class="box_left">
        左寄せ3
    </div>
  </div>
float.css
.box_left {
    color: #FFF;
    width:100px;
    height:100px;
    margin-left:10px;
    float:left;
    background-color:#F00;
}
.box_wrap {
    width:500px;
    height:auto;
    border:1px solid #000;
}
.clearfix:after {
  display: block;
  clear: both;
  content: "";
}

おまけ:各ブラウザ対応

displayの各プロパティのブラウザごと対応状況まとめをこちらに再掲します。
ご参考までに (2015-09-26 15.10.04時点) 。

スクリーンショット 2015-09-26 15.10.04.png

以上、ご質問・コメントなどございましたらお寄せください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away