如何控制 <label> 标签的宽度-之路教程

←如何点击一个 div 到它的底层元素

如何使用 CSS 将图像转换为灰度图像→

如何控制 <label> 标签的宽度

<label> 元素为 <input> 标签指定一个文本标签。

由于它是一个内联元素，单独使用 width 属性不会有任何效果。

但是有一些方法可以为 <label> 标签增加宽度。

在本教程中，我们将演示一些通过使用设置为“block”的 display 属性和 width 属性来控制 <label> 标签宽度的示例。

创建 HTML

使用 <form> 元素。
将带有 for 属性的 <label> 标签和带有 id、name 和 type 属性的 <input> 标签放在 <form> 元素中。

<form>
  <label for="name">Enter your  name:</label>
  <input id="name" name="name" type="text" />
</form>

添加 CSS

将显示设置为“block”。
指定宽度。

label {
  display: block;
  width: 130px;
}

使用 display 属性的“block”值为 <label> 标签添加宽度的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      label {
        display: block;
        width: 130px;
      }
    </style>
  </head>
  <body>
    <form>
      <label for="name">Enter your name:</label>
      <input id="name" name="name" type="text" />
    </form>
  </body>
</html>

让我们看另一个示例，其中我们使用设置为“inline-block”的 display 属性。

使用 display 属性的“inline-block”值向 <label> 标签添加宽度的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      label {
        display: inline-block;
        width: 150px;
      }
    </style>
  </head>
  <body>
    <form>
      <label for="name">Enter your name:</label>
      <input id="name" name="name" type="text" />
    </form>
  </body>
</html>

日期：2020-06-02 22:15:00 来源：oir作者：oir