CSS宽度：在标签中不起作用答案

【问题标题】：CSS width: not working in labelCSS宽度：在标签中不起作用
【发布时间】：2017-03-09 16:16:01
【问题描述】：

我编写了一个简单的表单来测试 CSS 中的宽度。无论我为宽度设置的值如何，边框仍然具有相同的宽度。有人可以帮助我错过什么吗？

<html  lang="en-US">
  <meta charset="UTF-8">
    <head>
      <style type="text/css">
        label {  
          width: 10em;  
          border-color: brown;  
          border-width: .25em;  
          border-style: double;  
          margin-right: .5em;      
        }
      </style>  
      <title>Trying CSS </title>  
    </head>  

    <body>
      <form  action="#">  
        <fieldset  >  
          <label> Name </label>  
          <input type="text"/>  
          <label  >Contact</label>  
          <input type="text" />  
          <label >Phone</label>  
          <input  type="text" />  
          <button type="button">Submit </button>  
        </fieldset>  
      </form>
    </body>
 </html>

【问题讨论】：

How can I control the width of a label tag?的可能重复
标签标签默认为display: inline;，因此宽度将不起作用。您可以使用：display: inline-block; 或 display: block; 设置它以使宽度起作用。 position: absolute|fixed、float: left|right 也可以让它工作，但只有在你知道需要时才使用它们。
请问为什么 float 也能正常工作？

标签： css

【解决方案1】：

使用这个css

label {  
width: 10em;  
border-color: brown;  
border-width: .25em;  
border-style: double;  
margin-right: .5em;      
float:left;
}
input{float:left;}

<!DOCTYPE HTML>
<!--Inform the Browser that the document is HTML-->
<html  lang="en-US">
<head>
<meta charset="UTF-8">
<head>
<style type="text/css">
label {  
width: 10em;  
border-color: brown;  
border-width: .25em;  
border-style: double;  
margin-right: .5em;      
float:left;
}
input{float:left;}
</style>  
<title>Trying CSS </title>  
</head>  
<body>
<form  action="#">  
<fieldset  >  
<label> Name </label>  
<input type="text"/>  
<label  >Contact</label>  
<input type="text" />  
<label >Phone</label>  
<input  type="text" />  
<button type="button">Submit </button>  
</fieldset>  
</form>
</body>
</html>

【讨论】：

为什么要添加浮动：左？我也很想知道为什么宽度本身不起作用
Label元素默认为内联显示模式。内联元素不接受宽度属性
不想float:left你可以使用display:block
太棒了，添加浮动是否也会将其更改为块状显示？我了解如何添加 display: block 帮助
已接受，您能告诉我为什么 float 也能正常工作吗？

【解决方案2】：

标签基本上是一个标签。因此，您应该尝试在标签标签内放置一个类，然后为此编写 css 。对于宽度尝试—— 宽度=100%

【讨论】：

【解决方案3】：

使用填充代替宽度

label {  
padding: 0 55px;  
border-color: brown;  
border-width: .5em;  
border-style: double;  
margin-right: .5em;      
}

【讨论】：

【解决方案4】：

<div class="labelborder">
     <label>sample text</label>
</div>
.labelborder {  
width: 10em;  
border-color: brown;  
border-width: .25em;  
border-style: double;  
margin-right: .5em;      
}

如果标签宽度只根据字体大小访问，如果你想在不增加字体大小的情况下增加，使用上面的代码，

【讨论】：

【解决方案5】：

只需根据您的要求为标签添加一种样式

display: "inline-block"

或

display: "block"

【讨论】：

【解决方案6】：

只需将display:inline-block 添加到标签以提供宽度

【讨论】：