連続するリストを横並びに等分表示する方法2

IDIA.JP > レポート > 連続するリストを横並びに等分表示する方法2
連続するリストを横並びに等分表示する方法2

連続するリストを横並びに等分表示する方法」の、よりシンプルな別の方法。

前提となるHTMLとCSS

HTML

次のようなHTMLでマークアップした「等分表示リスト」について考える。番号なしリストのクラス「al-x」のxには数字を入れています。

<html>
<head>
<title>等分表示リスト</title>
</head>
<body>
<div class="appositive-list">
<ul class="al-x">
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
<li>08</li>
<li>09</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
</div>
</body>
</html>

CSS

/* 簡便のために全要素のマージンとパディングを0に */
* {
  margin: 0;
  padding: 0;
}

/* 一覧エリアの背景 */
.appositive-list {
  background: #ccc;
}

/* クリアフィックス */
.appositive-list ul:after {
  content: "";
  clear: both;
  display: block;
}

/* 一覧のリストの設定 */
.appositive-list ul li {
  list-style-type: none;
  display: block;
  float: left;
  margin-bottom: 2.87%;
  height: 75px;/* 見た目の調整 */
  line-height: 75px;/* 見た目の調整 */
  background: #0cc;/* 見た目の調整 */
  text-align: center;/* 見た目の調整 */
}

/* 等分なし */
.appositive-list ul.al-1 li {
  width: 100%;
}

/* 横並びに等分 */
.appositive-list ul.al-2 li {
  width: 48.56%;
  margin-right: 2.88%;
}
.appositive-list ul.al-2 li:nth-child(2n) {
  margin-right: 0;
}

/* 横並びに3等分 */
.appositive-list ul.al-3 li {
  width: 31.42%;
  margin-right: 2.87%;
}
.appositive-list ul.al-3 li:nth-child(3n) {
  margin-right: 0;
}

/* 横並びに4等分 */
.appositive-list ul.al-4 li {
  width: 22.84%;
  margin-right: 2.88%;
}
.appositive-list ul.al-4 li:nth-child(4n) {
  margin-right: 0;
}

/* 横並びに5等分 */
.appositive-list ul.al-5 li {
  width: 17.68%;
  margin-right: 2.9%;
}
.appositive-list ul.al-5 li:nth-child(5n) {
  margin-right: 0;
}

/* 横並びに6等分 */
.appositive-list ul.al-6 li {
  width: 14.25%;
  margin-right: 2.9%;
}
.appositive-list ul.al-6 li:nth-child(6n) {
  margin-right: 0;
}

/* 横並びに7等分 */
.appositive-list ul.al-7 li {
  width: 11.8%;
  margin-right: 2.9%;
}
.appositive-list ul.al-7 li:nth-child(7n) {
  margin-right: 0;
}

/* 横並びに8等分 */
.appositive-list ul.al-8 li {
  width: 9.98%;
  margin-right: 2.88%;
}
.appositive-list ul.al-8 li:nth-child(8n) {
  margin-right: 0;
}

/* 横並びに9等分 */
.appositive-list ul.al-9 li {
  width: 8.56%;
  margin-right: 2.87%;
}
.appositive-list ul.al-9 li:nth-child(9n) {
  margin-right: 0;
}

表示結果

1段組

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

2段組

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

3段組

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

4段組

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

5段組

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

6段組

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

7段組

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

8段組

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

9段組

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

補足

余白部分の印象が変わらないように、marginは2.87%から2.9%となるようにしています。

参考

記事のデータ

文責IDIA.JP
公開日2016年7月4日
カテゴリー
タグ
関連する記事

記事を共有する