Question

这是一个CSS /设计问题。我有三个文本框，我想在网页上居中对齐。然后我想在每个人的右边有一个标签说明。

当我使用像text这样的属性时：align：center因为标签的长度不同，它会抛出文本框的对齐[见下面的图像链接]

http://www.mediafire.com/imageview.php?quickkey=qcyoajm2iuk

是否有一种简单的方法可以保持文本框对齐，然后在不更改文本框的情况下将标签放在右边？

感谢。

Answer 1

基本上你必须为表单和float: left输入以及float: right标签定义宽度，因此标签会在输入旁边。这是一个在CSS中居中相对possitionet元素的技巧：margin: 0 auto但你必须定义一个宽度。

你要遇到的问题是你所有的输入都会彼此相邻。为了防止您将标签嵌套并输入元素。并清除浮子。我会使用UL LI元素而不是段落（如PW示例中所示），因为大多数时候，您的表单是一个问题列表。

我为你做了一个例子： http://jsfiddle.net/Qs4pk/2/

Answer 2

将<fieldset>标记与<label>结合使用。 Step by step explanation。
然后随意对齐。

Answer 3

在屏幕截图中，您将文本对齐：居中于div中的每个元素。所以你看到了当前方法的正确行为。

相反，您需要将div（文本框和标签元素的包含框）居中，然后左对齐（这将是浏览器默认值）内部元素。

以div使用为中心：

#content {

宽度：700px; margin-left：auto; margin-right：auto; }

Answer 4

http://reisio.com/temp/form2.html

<!doctype html>
<html>
    <head>
        <title></title>
        <style>
body {
    margin: 8px;
    padding: 0;
}
form {
    margin: 0;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font: 12px sans-serif;
    display: block !important;
    display: inline-block;
    overflow: hidden;
}
li {
    float: left;
    clear: left;
}
label {
    display: block;
    width: 200px;
    height: 19px;
    line-height: 19px;
    position: relative;
    margin: 0 0 5px;
    cursor: pointer;
    text-align: right;
}
input {
    width: 120px;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid gray;
    padding: 1px 0;
    height: 15px;
    font: 12px sans-serif;
}
        </style>
    </head>
    <body>
        <form action="">
            <ul>
                <li>
                    <label><input> Beans</label>
                </li>
                <li>
                    <label><input> Cornbread</label>
                </li>
            </ul>
        </form>
    </body>
</html>

Answer 5

你的问题也有设计方面。 从用户的角度来看，标签和输入文本框的最佳对齐方式是什么？？几个月前，当我在MIX09找到“Web Form Design”时，我感到非常惊讶（见http://videos.visitmix.com/MIX09/C17F）。如果一个地方在其他地方标记和输入文本框，您将在示例中看到如何改善用户体验。这段视频在这方面改变了我的想法。您还可以查看http://www.lukew.com/presos/和“Web表单中的提示和验证的最佳做法”http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/，其中一些信息非常详细。

如何正确地将网页上的文本框与标签对齐

5 个答案: