Question

以下代码似乎在所有浏览器中在其标签下方的行上呈现输入字段：

<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>

出现的方式如下：

名字
[输入字段]

我的理解是内联块应该允许标签的固定宽度，同时仍然允许输入元素是内联的。这就是我期望它出现的方式：

名字[输入字段]

为什么在此实例中为标签添加固定宽度不允许两个元素以内联方式显示？

Answer 1

虽然您的版本在语义上是正确的，但您必须这样做才能获得所需的行为：

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。

也是如此

Answer 2

您的标签包装输入。对于没有自动换行的文本和输入，75px可能没有足够的宽度

Answer 3

这对我有用：只需显示：内联

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

为什么内联块不能在此代码示例中内联元素？

3 个答案: