画像を均等に横に並べる

 

実行

スクリーンショット 2017-08-04 17.48.42.png

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="http://placehold.jp/150x50.png"></a></li>
    <li><a href="https://www.yahoo.co.jp/"><img src="http://placehold.jp/150x50.png"></a></li>
    <li><a href="https://www.yahoo.co.jp/"><img src="http://placehold.jp/150x50.png"></a></li>
    <li><a href="https://www.yahoo.co.jp/"><img src="http://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;
}