Rumah > Artikel > hujung hadapan web > css怎么改变li标签的高度
css怎么改变li标签的高度
- 青灯夜游asal
- 2022-09-06 18:08:463784semak imbas
css改变li标签高度的3种方法：1、使用height属性，设置li元素的固定高度，语法“li{height:高度值;}”。2、使用min-height属性，设置li元素的最小高度，语法“li{min-height:高度值;}”。3、使用max-height属性，设置li元素的最大高度，语法“li{max-height:高度值;}”。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
html改变li标签的高度
1、使用height属性
height属性设置元素的固定高度。（注意： height属性不包括填充，边框，或页边距！）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
li{
background-color: pink;
margin: 10px;
}
.l2{
height: 10px;
}
.l3{
height: 50px;
}
.l4{
height: 100px;
}
</style>
</head>
<body>
<div>默认li高度是由文本高度决定的</div>
<ul>
<li class="l1">li标签，默认高度</li>
<li class="l2">li标签，设置高度为10px</li>
<li class="l3">li标签，设置高度为50px</li>
<li class="l4">li标签，设置高度为100px</li>
</ul>
</body>
</html>
2、使用min-height属性
min-height属性设置元素的最低高度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
li {
background-color: pink;
margin: 10px;
}
.l2 {
min-height: 50px;
}
</style>
</head>
<body>
<div>默认li高度是由文本高度决定的</div>
<ul>
<li class="l1">li标签，默认高度</li>
<li class="l2">li标签，设置最小高度为50px</li>
</ul>
</body>
</html>没有内容时，或内容高度小于50时，li的高度显示在50px；
内容高度大于50时，li高度是由文本高度决定的
<li class="l2"> li标签，设置最小高度为50px<br /> li标签，设置最小高度为50px<br /> li标签，设置最小高度为50px<br /> li标签，设置最小高度为50px<br /> li标签，设置最小高度为50px </li>
3、使用max-height属性
max-height 属性设置元素的最大高度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
li{
background-color: pink;
margin: 10px;
}
.l2{
max-height: 50px;
}
</style>
</head>
<body>
<div>默认li高度是由文本高度决定的</div>
<ul>
<li class="l1">li标签，默认高度</li>
<li class="l2">
li标签，设置最大高度为50px<br />
li标签，设置最大高度为50px<br />
li标签，设置最大高度为50px<br />
li标签，设置最大高度为50px
</li>
</ul>
</body>
</html>
推荐教程：《html视频教程》
Atas ialah kandungan terperinci css怎么改变li标签的高度. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css怎么强制增加优先级Artikel seterusnya：移动端能使用jquery吗