PHP程序员小白到大牛集训(12期免息)
首页 >web前端 >前端问答 > 正文

css怎么改变li标签的高度

原创2022-09-06 18:08:461202 + Vue前端学习QQ群(点击入群)

css改变li标签高度的3种方法:1、使用height属性,设置li元素的固定高度,语法“li{height:高度值;}”。2、使用min-height属性,设置li元素的最小高度,语法“li{min-height:高度值;}”。3、使用max-height属性,设置li元素的最大高度,语法“li{max-height:高度值;}”。

前端(vue)入门到精通课程:进入学习
API 文档、设计、调试、自动化测试一体化协作工具:点击使用

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

html改变li标签的高度

1、使用height属性

height属性设置元素的固定高度。(注意: height属性不包括填充,边框,或页边距!)



	
		
		
	
	
		
默认li高度是由文本高度决定的
  • li标签,默认高度
  • li标签,设置高度为10px
  • li标签,设置高度为50px
  • li标签,设置高度为100px
登录后复制

1.png

2、使用min-height属性

min-height属性设置元素的最低高度。



	
		
		
	
	
		
默认li高度是由文本高度决定的
  • li标签,默认高度
  • li标签,设置最小高度为50px
登录后复制

没有内容时,或内容高度小于50时,li的高度显示在50px;

2.png

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

  • li标签,设置最小高度为50px
    li标签,设置最小高度为50px
    li标签,设置最小高度为50px
    li标签,设置最小高度为50px
    li标签,设置最小高度为50px
  • 登录后复制

    3.png

    3、使用max-height属性

    max-height 属性设置元素的最大高度。

    
    
    	
    		
    		
    	
    	
    		
    默认li高度是由文本高度决定的
    • li标签,默认高度
    • li标签,设置最大高度为50px
      li标签,设置最大高度为50px
      li标签,设置最大高度为50px
      li标签,设置最大高度为50px
    登录后复制

    4.png

    推荐教程:《html视频教程

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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

  • 相关标签:css
  • 程序员必备接口测试调试工具:点击使用

    Apipost = Postman + Swagger + Mock + Jmeter

    Api设计、调试、文档、自动化测试工具

    后端、前端、测试,同时在线协作,内容实时同步

    支持grpc,http,websocket,socketio,socketjs类型接口调试

    相关文章

    相关视频


    视频教程分类

    专题推荐

    官方公众号

    php中文网课程

    扫码关注官方公众号
    回复“phpcn01”领取php学习资料课程
    全套工具、电子书、脑图、内部课程等

    推荐视频教程

    开通VIP会员课 0元学

    热门推荐