Html CSS将文本框与标签对齐_Html_Css

Html CSS将文本框与标签对齐

html css

Html CSS将文本框与标签对齐,html,css,Html,Css,我的小提琴几乎说明了这个问题。如果有人能帮忙的话，尝试将标签放在每个文本框的左侧您正在使输入内联块，但也将它们浮动到左侧如果删除浮点：left并在每次输入后添加，您将获得正确的行为要对齐框，请在每个标签/输入周围添加一个div包装，使标签内联块具有固定宽度。还有其他方法可以做到这一点，但这是一种方法正如stolli提到的，您还可以简单地使用标签元素作为包装器：要获得Jeff B的答案，只需在css中为元素指定一个宽度即可 label{width:100px}其中“100”是最适合布

我的小提琴几乎说明了这个问题。如果有人能帮忙的话，尝试将标签放在每个文本框的左侧

您正在使输入

内联块

，但也将它们浮动到左侧

如果删除

浮点：left

并在每次输入后添加

，您将获得正确的行为

要对齐框，请在每个标签/输入周围添加一个

div

包装，使标签

内联块具有固定宽度。还有其他方法可以做到这一点，但这是一种方法

正如stolli提到的，您还可以简单地使用标签元素作为包装器：
要获得Jeff B的答案，只需在css中为元素指定一个宽度即可
label{width:100px}
其中“100”是最适合布局的值
此外，请记住，标签的主要用途（与标签的div或span不同）是标签充当与其关联的控件的辅助单击目标。因此，您可以将元素包装在标签标签（
）中，或通过id（
）将它们关联起来，并为用户提供更多可单击的内容，只需单击标签，他们就可以切换控件、聚焦文本输入等等。触摸设备可用性方面的一大好处。
您可以给您的div.boxalign2
和标签提供固定宽度
查看演示
.boxalign2 {
  width:400px;
}

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


定心
名称
电子邮件
电话
.表格{
保证金：0自动；
宽度：210px；
}
.表格标签{
显示：内联块；
文本对齐：右对齐；
浮动：左；
}
.表格输入{
显示：内联块；
文本对齐：左对齐；
浮动：对；
}

此处演示：我正试图保持文本框对齐（如我的小提琴所示），这就是我解决问题的方法。很好的例子。非常有用。谢谢分享。
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;
}

.boxalign2 {
  width:400px;
}

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

<!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>