CSS将文本框与标签对齐

时间:2013-10-31 18:42:28

标签: html css

我的小提琴几乎显示了这个问题。如果有人可以提供帮助,请尝试将标签放在每个文本框的左侧。 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 个答案:

答案 0 :(得分:5)

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

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

http://jsfiddle.net/A8es3/

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

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

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

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

答案 1 :(得分:1)

您可以为您的div .boxalign2label固定宽度添加。

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

.boxalign2 {
  width:400px;
}

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

答案 2 :(得分:0)

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

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

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

答案 3 :(得分: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/