如何使<span>高度與<input type =「text」>

相同高度我試圖將一個元素放在元素的左側，但是我似乎無法使它們的高度相同並與每個元素對齊其他。跨度似乎總是定位更高一點。如何使<span>高度與<input type =「text」>

任何人有任何想法？

閃耀*

編輯：HTML部分

<label for="name">Username: </label> 
<input type="text" name="name" id="name" value="" maxlength="15"/> 
<span id="box" style="display:none"></span>

CSS

span.box{ 
    position:absolute; 
    width:100px; 
    margin-left:20px; 
    border:1px; 
    padding:2px; 
    height: 16px; 
} 

input.name { 
    width: 115px; 
    height: 14px; 
}

來源

2010-11-18 Sparkles

請把你的代碼的一部分，該解決方案依賴於標籤的類型變動時 – 2010-11-18 02:10:11

如果你想標記輸入字段，嘗試標籤標籤（http://www.w3schools.com/tags/tag_label.asp） – 2010-11-18 02:13:41

如果要垂直對齊在同一行的項目，你可能不需要使它們具有相同的高度 - 只需爲vertical-align屬性賦予相同的值即可。

.myinput, .myspan { 
    vertical-align: middle; 
}

什麼很多人不垂直對齊不解的是，爲了使事情垂直對齊到中間，一切都在該行必須有「中間」的vertical-align屬性 - 不只是一件事（如跨度）。

想象一下在任何內聯內容中運行的不可見水平線。通常，文本的底線和圖像的底部與此線對齊。但是，如果將垂直對齊更改爲中間，則元素的中間（文本範圍，圖像等）與此行對齊。然而，如果他們仍然將他們的底線或底線對齊到那條線上，那麼這不會與其他物品垂直排列 - 他們需要將他們的中線與該線對齊。

來源

2010-11-18 02:59:49 thomasrutter

哇該作品！現在我只想匹配高度，謝謝大家！ :) – Sparkles 2010-11-18 03:05:48

感謝「該行中的所有內容都必須具有」中間「的垂直對齊屬性」..！ – 2010-11-18 03:38:20

井高可能因不同的瀏覽器而異。 – SuperDuck 2010-11-18 03:49:28

嘗試填充：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<head> 
    <style type="text/css"> 
     .lbl { 
      background-color:lime; 
      padding:0; 
     } 
     .t { 
      height:17px; 
      padding:0; 
     } 
    </style> 
</head> 
<body> 
    <span class="lbl">My label : </span> 
    <input class="t" type="text" name="t"> 
</body>

記住 '跨度' 是一個內聯元素，而不是一個塊列弗el元素，所以尺寸定義不適用，除非您使用'display：block'CSS屬性，否則。內聯元素獲取內容的大小，所以像字體大小是定義該跨度的高度的東西。

此外，我會使用'標籤'標籤'for'屬性，而不是'跨度'。這使得結構更好，並具有通過點擊標籤將焦點移至輸入的優勢。

以下是塊級別的例子，它允許逐個像素排列的每一個瀏覽器：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <style type="text/css"> .lbl { background-color: lime; border: 1px solid silver; display: block; float: left; font-size: 12px; height: 16px; padding: 2px; width: 100px; } .t { border: 1px solid silver; display: block; float: left; font-size: 12px; height: 16px; margin-left: 4px; padding: 2px; width: 150px; } </style> </head> <body> <label class="lbl">My label : </label> <input class="t" type="text" name="t"> </body>

來源

2010-11-18 02:15:20 SuperDuck

你好，我已經在輸入之前使用了標籤，這是一個隱藏的跨度，如果錯誤返回到表單就會出現。我已經嘗試了填充，它使它具有相同的大小，但現在它比輸入框略高。 – Sparkles 2010-11-18 02:53:30

這是因爲輸入框的邊框。如果您有可見的背景或邊框，並嘗試逐個像素對齊，那麼您可以使用它的塊級別，因爲字體高度可能會因瀏覽器和系統而有所不同。我在答案中添加了塊級示例。 – SuperDuck 2010-11-18 03:10:11

這裏有SuperDucks代碼稍微修整過的版本：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<head> 
<style type="text/css"> 
    .lbl { 
     background-color:lime; 
     padding:0; 
    line-height: 24px; 
    height: 24px; 
    display: inline-block; 
    } 
    .t { 
     height:17px; 
     padding:0; 
     height: 20px; 
     display: inline-block; 
    } 
</style> 
</head> 
<body> 
    <span class="lbl">My label : </span> 
    <input class="t" type="text" name="t"> 
</body>

來源

2010-11-18 03:12:59

請注意，內聯塊在IE平臺上不可用。我是內嵌塊的粉絲，否則=） – SuperDuck 2010-11-18 03:27:30

你是對的，但從IE8開始，它的支持，所以，希望有一天很快，我們可以使用它沒有後顧之憂 – 2010-11-18 04:19:33

也IE 6/7支持行內塊在內聯元素，據此，所以它可能工作？ http://www.quirksmode.org/css/display.html – 2010-11-18 04:22:25

如何使<span>高度與<input type =「text」>

回答

相關問題