表单字段的水平对齐方式

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.

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

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