爲什麼inline-block在此代碼示例中不呈現內聯元素？

下面的代碼似乎呈現在所有瀏覽器的標籤下面的一行輸入字段：爲什麼inline-block在此代碼示例中不呈現內聯元素？

<html> 
<head> 
    <style type="text/css"> 
    label { display:inline-block; width:75px } 
    </style> 
</head> 
<body> 
    <form> 
     <label>First Name <input type="text" name="first_name" size="30" maxlength="30"/></label> 
    </form> 
</body> 
</html>

這是怎麼出現的：

名
[輸入字段]

我的理解是，內聯塊應該允許標籤的固定寬度，同時仍然允許輸入元素內聯。這是我沒有料到它出現：

名[輸入字段]

爲什麼在這種情況下，除了固定寬度的標籤不允許這兩個元素出現內聯？

來源

2013-02-04 Arif

爲什麼你不嘗試使用類和ID的添加CSS屬性？ –

雖然你的版本是語義正確的，你必須這樣做，這樣讓你期望的行爲：

HTML

<form> 
    <label for="first_name">First Name</label><input type="text" name="first_name" id="first_name" size="30" maxlength="30"/> 
</form>

CSS

label { 
    display:inline-block; 
    width:75px; 
    cursor: pointer; 
}

Fiddle

那方式，label和input彼此分開並且可以自由流動。如果label持有input，情況並非如此;即使在將label設置爲display: inline-block時也是如此。

來源

2013-02-04 12:10:37 Sven

可能應該給它一個「for」屬性來實現正確的點擊行爲。 – keithjgrant

是的，你完全正確。另外，將光標設置爲指針是個好主意。我會編輯我的答案，謝謝。 – Sven

完美 - 謝謝！ – Arif

-1

這爲我工作：只要讓它顯示：內聯

<style type="text/css"> 
    label { display:inline; width:75px } 
    </style>

來源

2013-02-04 12:12:07

這個「工作」的原因是因爲'width'對內聯元素沒有任何作用。 – keithjgrant

您的標籤包裝的輸入。 75px可能是不夠寬度的文字和輸入沒有文字包裝

來源

2013-02-04 12:13:30 keithjgrant

爲什麼inline-block在此代碼示例中不呈現內聯元素？

回答

相關問題