画像を均等に横に並べる

実行

html

html5.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>HTML 5 complete</title>
</head>
<body>


  <ul class="table-ul">
    <li><a href="https://www.yahoo.co.jp/"><img src="https://placehold.jp/150x50.png"></a></li>
    <li><a href="https://www.yahoo.co.jp/"><img src="https://placehold.jp/150x50.png"></a></li>
    <li><a href="https://www.yahoo.co.jp/"><img src="https://placehold.jp/150x50.png"></a></li>
    <li><a href="https://www.yahoo.co.jp/"><img src="https://placehold.jp/150x50.png"></a></li>
  </ul>


</body>
</html>

css

style.css

.table-ul {
  /*親要素に display:table; を指定 */
  display: table;
  /*テーブル（表）の列幅を固定レイアウトにする */
  table-layout: fixed;
  width: 1000px;
}


.table-ul li {
  /* 内包する複数の子要素に対して display:table-cell; を指定して要素を横並びにする */
  display: table-cell;
}

藤沢瞭介(Ryosuke Hujisawa)
りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています！