6

我的小提琴几乎说明了这个问题。如果有人可以提供帮助，请尝试将标签放在每个文本框的左侧。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;
}
4

4 回答 4

8

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

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

http://jsfiddle.net/A8es3/

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

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

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

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

于 2013-10-31T18:47:42.833 回答
1

你可以给你的 div.boxalign2和label固定宽度。

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

.boxalign2 {
  width:400px;
}

label {
  text-align:right;
  padding-right:20px;
  display:inline-block;
  min-width:150px;
}
于 2013-10-31T18:56:41.833 回答
0

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

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

此外，请记住标签的主要目的（与仅用于标签的 div 或 span 不同）是标签充当与其关联的控件的次要点击目标。因此，您可以将元素包装在标签标签 ( <label><input /></label>) 中或通过 id ( <label for="foo"><input id="foo"/>) 关联它们，并为用户提供更多点击，只需点击标签，他们就可以切换控件、聚焦文本输入等。触摸设备可用性的一大福音。

于 2013-10-31T18:53:12.093 回答
0 
<!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/

于 2017-11-26T17:46:03.547 回答