2

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

当我使用 text:align:centre 之类的属性时，因为标签的长度不同，它会抛出文本框的对齐方式 [参见下面的图片链接]

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

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

谢谢。

4

5 回答 5

5

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

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

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

于 2010-05-09T10:47:21.397 回答
3

将<fieldset>标签与<label>. 一步一步的解释。
然后随意对齐。

于 2010-05-09T09:43:18.610 回答
1

在您的屏幕截图中，您有 text-align:centered div 内的每个元素。因此，您会看到当前方法的正确行为。

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

要使 div 居中，请使用：

#content {

宽度：700 像素；左边距：自动；边距右：自动；}

于 2010-05-09T10:01:43.800 回答
1

你的问题也有一个设计方面。从用户的角度来看，标签和输入文本框的最佳对齐方式是什么？几个月前，当我在 MIX09 发现“Web 表单设计”时，我感到非常惊讶（参见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/其中一些有密切的信息。

于 2010-05-09T20:52:27.250 回答
1

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

<!doctype html>
<html>
    <头部>
        <标题></标题>
        <风格>
身体 {
    边距：8px；
    填充：0；
}
形式 {
    边距：0；
}
ul {
    列表样式：无；
    边距：0；
    填充：0；
    字体：12px 无衬线；
    显示：块！重要；
    显示：内联块；
    溢出：隐藏；
}
李{
    向左飘浮;
    清除：左；
}
标签 {
    显示：块；
    宽度：200px；
    高度：19px；
    行高：19px；
    位置：相对；
    边距：0 0 5px；
    光标：指针；
    文本对齐：右；
}
输入 {
    宽度：120px；
    位置：绝对；
    左：0；
    顶部：0；
    边框：1px 纯灰色；
    填充：1px 0；
    高度：15px；
    字体：12px 无衬线；
}
        </style>
    </head>
    <正文>
        <form action="">
            <ul>
                <li>
                    <label><input> 豆子</label>
                </li>
                <li>
                    <label><input> 玉米面包</label>
                </li>
            </ul>
        </form>
    </正文>
</html>
于 2010-05-09T18:56:31.667 回答