1. 결과 실현 :
2. 부동 + 백분율 레이아웃 사용 :
index.html
<body>
<nav>
<a href="#">
<img src="./imgs/shop.png" alt="">
<span>京东超市</span>
</a>
<a href="#">
<img src="./imgs/shop.png" alt="">
<span>京东超市</span>
</a>
<a href="#">
<img src="./imgs/shop.png" alt="">
<span>京东超市</span>
</a>
<a href="#">
<img src="./imgs/shop.png" alt="">
<span>京东超市</span>
</a>
<a href="#">
<img src="./imgs/shop.png" alt="">
<span>京东超市</span>
</a>
</nav>
</body>
index.css
nav {
padding-top: 8px;
}
nav a {
background-color: pink;
display: block;
/* 浮动+百分比布局 */
float: left;
width: 20%;
text-align: center;
}
nav a img {
width: 40px;
margin: 10px 0;
}
nav a span {
display: block;
}