1

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

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

这是它的外观：

名字
[输入字段]

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

名字 [输入字段]

为什么在这种情况下为标签添加固定宽度不允许两个元素内联显示？

4

3 回答 3

3

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

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

小提琴

这样，thelabel和 theinput彼此分离，可以自由流动。如果label持有input，则情况并非如此；即使设置label为display: inline-block.

于 2013-02-04T12:10:37.177 回答
2

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

于 2013-02-04T12:13:30.453 回答
-1

这对我有用：让它显示：内联

 <style type="text/css">
    label { display:inline; width:75px }
    </style>
于 2013-02-04T12:12:07.833 回答