画像のリストを水平ナビゲーション バーとして機能させようとしています。残念ながら、画像を並べて配置することはできません。ネストされた画像、リンク、リスト項目、および順序付けられていないリストのそれぞれから、パディング、マージン、および境界線を削除しようとしました。
HTMLコードはシンプル
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Menu App</title>
<link type="text/css" rel="stylesheet" href="css/menu.css" />
</head>
<body>
<div id="page-1">content</div>
<div id="footer">
<ul>
<li><a href="#"><img src="img/zone.png" alt="toggle zones"></a></li>
<li><a href="#"><img src="img/nr.png" alt="toggle nr services"></a></li>
<li><a href="#"><img src="img/wheel.png" alt="toggle wheelchair access"></a></li>
<li><a href="#"><img src="img/cycle.png" alt="toggle cycle access"></a></li>
</ul>
</div>
</body>
</html>
cssコードは次のとおりです
body {
margin: 0;
}
#footer {
width: 100%;
position: absolute;
bottom: 0;
text-align: center;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
width: 40px;
height: 40px;
display: inline-block;
overflow: hidden;
cursor: pointer;
margin: 0;
}
li a {
display: block;
}
li a img {
border-radius: 0.2em;
background: #ccc;
width: 100%;
border: none;
}
その他の詳細
画像の自然なサイズは 40px x 40px クロムでチェックする場合
- 画像のサイズは 40px x 40px です
- タグのサイズは 40px x 45px ???
- li タグのサイズが 40px x 40px に戻りました
- ul と div#footer の高さは両方とも 45??
- ボタンの灰色の背景の間に空白があります
要約すると、空白を削除し、リスト全体の高さをボタンの高さまで減らして (強制的に 40 ピクセルにせずに)、流動的なレイアウトでも機能するようにします。