CSS寬度：不在標籤中工作

我已經寫了一個簡單的表單來測試CSS中的寬度。無論我爲寬度設置的值如何，邊框的寬度仍然相同。有人可以幫助我失去什麼嗎？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>

來源

2017-03-09 TimeToCodeTheRoad

可能重複[我怎樣才能控制標籤標籤的寬度？]（http://stackoverflow.co m/questions/2820586/how-can-i-control-width-of-label-tag） –

標籤標籤是'display：inline;'作爲默認值，所以寬度將無法工作。你可以用：display：inline-block;或者display：block;來使寬度工作。 'position：absolute | fixed'，'float：left | right'也可以使它工作，但只有在你知道你需要它時才使用它們。 – shuizhongyuemin

請問爲什麼浮動使它也起作用？ – TimeToCodeTheRoad

使用此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>

來源

2017-03-09 05:57:33 user7357089

爲什麼添加float：left？我也很想理解爲什麼寬度本身不起作用 – TimeToCodeTheRoad

標籤元素默認爲內聯顯示模式。內聯元素不接受寬度屬性 – user7357089

不想要浮動：您可以使用display：block – user7357089

基本上標籤是標籤。所以你應該嘗試的是將一個類放入label標籤中，然後爲此寫入css。和寬度try-- 寬度= 100％

來源

2017-03-09 05:43:04 Soykot

使用填充而不是寬

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

來源

2017-03-09 05:47:46

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

如果標籤寬度僅根據字體大小訪問，如果你想增加不增加字體大小，使用上面這樣的代碼，

來源

2017-03-09 05:48:38 iyyappan

只是多加一個風格標記按您的要求

display: "inline-block"

或

display: "block"

來源

2017-03-09 05:49:20

只需添加display:inline-block到標籤給的寬度

來源

2017-03-09 06:21:11

CSS寬度：不在標籤中工作

回答

相關問題