ULリストに横並びしたliタグの高さをそろえるCSS記述

完成形

<ul>
<li>サンプル1<br>サンプル</li>
<li>サンプル2</li>
<li>サンプル3<br>サンプル3<br>サンプル3</li>
<ul>
  • サンプル1
    サンプル
  • サンプル2
  • サンプル3
    サンプル3
    サンプル3

高さを一定に固定。overflow:hidden。

ul li {
width:80px;
height:80px;
border:1px solid #F00;
list-style:none;
overflow:hidden;
float:left;
}

DivやPの背景画像を設定すると高さがうまく収まらない。

 使用するのは下の桜の画像。横500×縦300ピクセルのJPEG画像です。

 この画像を背景に設定して画像をぴったり表示させていきます。