为什么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在此代码示例中不呈现内联元素？

回答

相关问题