li 标签无法设置宽度和高度
首先看一下代码
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>图片相册</title>
</head>
<body>
<!-- 首先将HTML结构搭建起来 -->
<img class="bigImg" src="./images/kate1.jpg" alt="" width="300px" height="360px">
<ul>
<li>
<a href="">
<img class="smallImg" src="./images/kate01.jpg" alt="" width="50px" height="70px">
</a>
</li>
<li>
<a href="">
<img class="smallImg" src="./images/kate02.jpg" alt="" width="50px" height="70px">
</a>
</li>
<li>
<a href="">
<img class="smallImg" src="./images/kate03.jpg" alt="" width="50px" height="70px">
</a>
</li>
<li>
<a href="">
<img class="smallImg" src="./images/kate04.jpg" alt="" width="50px" height="70px">
</a>
</li>
<li>
<a href="">
<img class="smallImg" src="./images/kate05.jpg" alt="" width="50px" height="70px">
</a>
</li>
</ul>
<!-- 设置一下样式 -->
<style media="screen">
*{
padding: 0px;
margin: 0px;
}
ul{
overflow: hidden;
list-style: none;
height: 100px;
}
ul li{
display: inline;
/* vertical-align: middle; */
margin-left: 10px;
padding: 5px;
height: 80px;
width: 60px;
border: 1px solid ;
}
a{
text-decoration: none;
margin: 0px;
}
.bigImg{
margin-bottom: 10px;
padding: 7px;
}
</style>
</body>
</html>
问题原因:将块级元素设置成行内元素
ul li{
display: inline;
/* vertical-align: middle; */
margin-left: 10px;
padding: 5px;
height: 80px;
width: 60px;
border: 1px solid ;
}
问题1: 什么是块级元素,什么是行内元素:
- 块级元素:
前后带换行符,独占一行的元素,不能设置宽和高。
display: block; - 行内元素:
前后不换行,但是同时也不能设置宽高的元素。
display: inline;
问题2:那些常用元素是块级元素,那些常用元素是行内元素:
- 块级元素:
div p table form h1~h7 ul li ol menu… - 行内元素:
span a b img input i em strong…
解决办法:将元素设置成为行内块元素
display:inline-block;