表单字段的水平对齐方式

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