• 技术文章 >web前端 >前端问答

    css怎么改变li标签的高度

    青灯夜游青灯夜游2022-09-06 18:08:46原创214

    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>

    1.png

    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;

    2.png

    内容高度大于50时,li高度是由文本高度决定的

    <li class="l2">
    	li标签,设置最小高度为50px<br />
    	li标签,设置最小高度为50px<br />
    	li标签,设置最小高度为50px<br />
    	li标签,设置最小高度为50px<br />
    	li标签,设置最小高度为50px
    </li>

    3.png

    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>

    4.png

    推荐教程:《html视频教程

    以上就是css怎么改变li标签的高度的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:css怎么强制增加优先级 下一篇:移动端能使用jquery吗
    VIP课程(WEB全栈开发)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• css文本行高是哪个属性• css怎么让文本域中字用不同颜色• css如何让第一个li不加样式• css怎么给指定第几个li加样式• css怎么设置左边距消失• 巧用CSS实现鼠标跟随 3D 旋转效果,让交互更加生动!
    1/1

    PHP中文网