HOME > 開発者向けBLOG > Webデザイン >  liにクラスを指定せず横幅内でぴったりと表示

Technology Note 開発者向けBLOG

Webデザイン

liにクラスを指定せず横幅内でぴったりと表示

こんにちは、ゼノフィ渡部です。

リストにクラスを指定せず横幅内でぴったりと表示させる方法をご紹介いたします。

横幅が290pxのboxがあると仮定し、そのbox内のulのliを横に並ばせます。liを3つ記述し、横幅を90px、それぞれのスペース用に右マージンで10pxを指定します。この時、通常は最後のli要素に右マージン0pxなどのクラス指定をしないと、liの要素が横に並ばずに下に落ちてしまいます。

クラスの指定をする回避方法として、liの親要素であるulにboxの幅を超える横幅(ここでは300px)を指定し、liの右マージンと同じ値(ここでは10px)をマイナスで指定します。マイナスプロパティを指定することによって最後のli要素の右マージンが相殺され、box内にul liの横並びがぴったりと表示されます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

div.box {
  width: 290px;
  height: 100px;
  background: #CCC;
}
 
ul.para {
  width: 300px;
  margin: 0 -10px 0 0; /* マイナスプロパティで相殺 */
}
 
ul.para li {
  float: left;
  width: 90px;
  margin-right: 10px;
  background: #EFEFEF;
}

li要素を3つ記述しています。

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="box">
    <ul class="para clearfix">
        <li>
            テキスト
        </li>
        <li>
            テキストテキスト
        </li>
        <li>
            テキストテキストテキスト
        </li>
    </ul>
</div>

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

ul {
  margin: 0;
  padding: 0;
}
 
ul li {
  list-style-type: none;
}
 
div.box {
  width: 290px;
  height: 100px;
  background: #CCC;
}
 
ul.para {
  width: 300px;
  margin: 0 -10px 0 0; /* マイナスプロパティで相殺 */
}
 
ul.para li {
  float: left;
  width: 90px;
  margin-right: 10px;
  background: #EFEFEF;
}
 
/* クリアフィックス */
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
 
.clearfix {
  overflow: hidden;
  zoom: 1;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="box">
    <ul class="para clearfix">
        <li>
            テキスト
        </li>
        <li>
            テキストテキスト
        </li>
        <li>
            テキストテキストテキスト
        </li>
    </ul>
</div>

<

>

PAGETOP