在页面布局中,一般会将html元素分为两种,即块级元素和行内元素。label为行内元素,不是块级元素。块级元素默认占一行高度,一行内有一个块级元素后一般无法添加其他元素,除非添加了float浮动。两个块级元素连续放置时,会在另起一行。块级元素一般可嵌套块级元素或行内元素。最直观的体现如下:
<!DOCTYPE html>
<html>
<head>?
<meta?charset="utf-8">?
<title>测试label标签</title>?
</head>
<body>
<p style="border-bottom:1px solid #ccc;color:red;padding-bottom:10px;margin-bottom:40px">测试label标签</p>
<label for="male">label标签</label>
<span style="background-color:#ccc;padding:10px;margin-right:10px">分割</span>
<label for="male">label标签</label>
</body>
</html>
显示效果:
![](https://video.ask-data.xyz/img.php?b=https://iknow-pic.cdn.bcebos.com/9f510fb30f2442a76bdce3bfda43ad4bd01302dd?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto)
可见,两个label并没有换行显示。