CSS对齐文本框与标签

我的小提琴几乎显示了问题。如果有人能够帮助，试图让标签位于每个文本框的左侧。 http://jsfiddle.net/HC64Y/CSS对齐文本框与标签

<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; 
}

来源

2013-10-31 user1

你正在你的输入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-31 18:47:42

我试图保持对齐文本框（在我的小提琴看出），这是怎么得我的问题。 – user1

你可以用一个包装来解决这个问题。请参阅编辑。 –

太棒了。谢谢杰夫 – user1

要ammend杰夫B的回答，让您的结果，简单地给元素的宽度在你的css

label {width: 100px}其中'100'是任何值看起来最适合你的布局。另外，请记住，标签的主要用途（与标签的div或跨度相对）是标签充当与其关联的控件的辅助点击目标。因此，您可以将元素包装在标签标签（<label><input /></label>）中或通过id（<label for="foo"><input id="foo"/>）将它们关联起来，并为用户提供更多的点击操作，只需单击标签，即可切换控件，集中文本输入等等。触摸设备的可用性的一大福音。

来源

2013-10-31 18:53:12 stolli

你可以给你的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-31 18:56:41 DaniP

这和Jeffs的回答一样有效。谢谢您的帮助。 – user1

没问题，我们在这里帮忙 – DaniP

<!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-26 17:46:03 Aravin

CSS对齐文本框与标签

回答

相关问题