html - 表单字段的水平对齐

Question

如何让城市状态zip在同一行对齐我减少了宽度但它不起作用如何修复它

<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 秒钟才意识到这一点。在大多数现代浏览器中按 [F12](FF 需要安装 FireBug)会启动捆绑的开发人员工具。您可以在此处检查违规元素并查看影响该元素的 CSS。

这是一个 updated fiddle .我已经将一个类应用于父 div inline-fields。在我添加的 CSS 中:

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