在input旁边的表单中alignment标签
我有非常基本和已知的forms，我需要在input正确alignment旁边的标签。 但是我不知道该怎么做。
我的目标是将标签alignment右侧的input。 这是所需结果的图片示例。
为了您的方便，我做了一个小提琴，并澄清我现在拥有的东西 – http://jsfiddle.net/WX58z/
片段：
<div class="block"> <label>Simple label</label> <input type="text" /> </div> <div class="block"> <label>Label with more text</label> <input type="text" /> </div> <div class="block"> <label>Short</label> <input type="text" /> </div> 一个可能的scheme
- 给标签
display: inline-block; - 给他们一个固定的宽度
- 将文本alignment到右侧
那是：
label { display: inline-block; width: 140px; text-align: right; }
<div class="block"> <label>Simple label</label> <input type="text" /> </div> <div class="block"> <label>Label with more text</label> <input type="text" /> </div> <div class="block"> <label>Short</label> <input type="text" /> </div>
之前回答过这个问题，你可以看看这里的结果：
创build表单以使字段和文本相邻 – 用什么语义来实现呢？
因此，要将相同的规则应用于小提琴，可以使用display:inline-block来并排显示标签和input组，如下所示：
CSS
input { margin-top: 5px; margin-bottom: 5px; display:inline-block; *display: inline; /* for IE7*/ zoom:1; /* for IE7*/ vertical-align:middle; margin-left:20px } label { display:inline-block; *display: inline; /* for IE7*/ zoom:1; /* for IE7*/ float: left; padding-top: 5px; text-align: right; width: 140px; }
更新的小提琴
我使用类似这样的东西：
<div class="form-element"> <label for="foo">Long Label</label> <input type="text" name="foo" id="foo" /> </div>
样式：
.form-element label { display: inline-block; width: 150px; }
您也可以尝试使用弹性盒
body { color:white; font-family:arial; font-size:1.2em; } form { margin:0 auto; padding:20px; background:#444; } .input-group { margin-top:10px; width:60%; display:flex; justify-content:space-between; flex-wrap:wrap; } label, input { flex-basis:100px; } </style> </head> <body> <form> <div class="wrapper"> <div class="input-group"> <label for="user_name">name:</label> <input type="text" id="user_name"> </div> <div class="input-group"> <label for="user_pass">Password:</label> <input type="password" id="user_pass"> </div> </div> </form> </body> </html>
