如何使用CSS3中的样式属性控制label标签宽度

 时间:2026-02-14 11:07:12

1、第一步,双击打开HBuilder编辑工具,新建一个静态页面label.html,使用HTML5模板,如下图所示:

如何使用CSS3中的样式属性控制label标签宽度

2、第二步,在<body></body>标签元素内,插入一个div,接着在div插入七个label和输入框,如下图所示:

如何使用CSS3中的样式属性控制label标签宽度

3、第三步,利用元素选择器设置input输入框的样式,如宽度、高度、背景渐变等,如下图所示:

如何使用CSS3中的样式属性控制label标签宽度

4、第四步,保存代码并打开浏览器预览界面,可以发现几个输入框和label间距一样,如下图所示:

如何使用CSS3中的样式属性控制label标签宽度

5、第五步,如果想要将label和input元素之间的间距拉大,直接定义label元素的宽度,结果发现不起作用,如下图所示:

如何使用CSS3中的样式属性控制label标签宽度

6、第六步,在label标签元素选择器中,添加属性display:inline-block(水平布局),display:block(垂直布局),再次预览会发现width属性起作用了,如下图所示:

如何使用CSS3中的样式属性控制label标签宽度

  • 幻想三国世界地图分析攻略
  • maya摄像机视图中看不到物体怎么办
  • 金铲铲之战挖掘机阵容搭配攻略
  • 初学者怎么快速了解象棋规则?
  • Ae如何快速利用通道模糊
  • 热门搜索
    象鼻山在哪里 穿越火线怎么刷cf点 怎么刷q币 适合发朋友圈的句子 脚麻腿麻是怎么回事 大溪地在哪里 如何炖排骨好吃 清蒸螃蟹如何清洗 乌东德水电站在哪里 鲜猪肝怎么做好吃