Question

我的小提琴几乎显示了这个问题。如果有人可以提供帮助，请尝试将标签放在每个文本框的左侧。 http://jsfiddle.net/HC64Y/

<div id="boxalign2" class="boxalign2" >                 
    <label>Hospital*:</label><input class="rounded2" required title="Hospital is required!" name="MainHospital" type="text" />  
    <label>Title*:</label><input class="rounded2" name="MainTitle" type="text"/>            
    <label>Department*:</label> <input class="rounded2" name="MainDept" type="text"/>
</div>

CSS

input.rounded2 {
    border: 1px solid #ccc;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 2px 2px 3px #666;
    -webkit-box-shadow: 2px 2px 3px #666;
    box-shadow: 2px 2px 3px #666;
    font-size: 20px;
    padding: 4px 7px;
    outline: 0;
    -webkit-appearance: none;

    float: left;
    display: inline-block;
    clear: left;
    width: 150px;
    text-align: right;
}

Answer 1

您正在输入inline-block，但您也将它们浮动到左侧。

如果您在每次输入后删除float: left并添加<br>，您将获得正确的行为。

http://jsfiddle.net/A8es3/

要对齐这些框，请在每个标签/输入周围添加div包装，使标签inline-block具有固定宽度。还有其他方法可以做到这一点，但这是一种方式。

http://jsfiddle.net/A8es3/1/

正如stolli所提到的，你也可以简单地使用label元素作为包装器：

http://jsfiddle.net/A8es3/2/

Answer 2

您可以为您的div .boxalign2和label固定宽度添加。

观看演示 http://jsfiddle.net/HC64Y/11/

.boxalign2 {
  width:400px;
}

label {
  text-align:right;
  padding-right:20px;
  display:inline-block;
  min-width:150px;
}

Answer 3

要推荐Jeff B的答案以获得结果，只需在css中给元素一个宽度

label {width: 100px}其中“100”是您的布局最适合的值。

另外，请记住标签的主要用途（与标签的div或span相反）是标签充当与其关联的控件的辅助点击目标。因此，您可以将元素包装在label标签（<label><input /></label>）中或通过id（<label for="foo"><input id="foo"/>）关联它们，并为用户提供更多点击，只需单击标签，他们就可以切换控件，关注文本输入，无论如何。触摸设备的可用性是一大福音。

Answer 4

<!DOCTYPE html>
<html>
<head>
    <title>Centering a form</title>
</head>
<body>
    <div class="form">
        <label>Name</label>
        <input type="text" name="name">

        <label>Email</label>
        <input type="text" name="email">

        <label>Phone</label>
        <input type="text" name="phone">
    </div>
</body>
</html>

<style type="text/css">
    .form {
        margin: 0 auto;
        width: 210px;
    }
    .form label{
        display: inline-block;
        text-align: right;
        float: left;
    }
    .form input{
        display: inline-block;
        text-align: left;
        float: right;
    }
</style>

在这里演示：https://jsfiddle.net/durtpwvx/

CSS将文本框与标签对齐

4 个答案: