html - 表单域的水平对齐

Question

如何使城市状态拉链对齐在同一行我减小了宽度但它不起作用如何修复它

<div class="">
   <label class="" for="">City</label><input style="width: 54px;" type="text">
   <label class="" for="">State</label><input style="width: 54px;" type="text">
   <label class="" for="">Zip</label><input style="width: 54px;" type="text" >
</div>

http://jsfiddle.net/VXXPC/19/

Answer 1

你的标签是display: block. 像使用display: inline-block字段一样使用。

我用浏览器开发工具花了大约 10 秒的时间才意识到这一点。在大多数现代浏览器（FF 需要安装 FireBug）中点击 [F12] 会启动捆绑的开发人员工具。在这里，您可以检查有问题的元素并查看影响元素的 CSS。

这是一个更新的小提琴。我已经将一个类应用于父 div inline-fields。在我添加的 CSS 中：

.inline-fields label {
    display: inline-block;
}