文本字段的垂直对齐答案

【问题标题】：vertical align for text fields文本字段的垂直对齐
【发布时间】：2009-11-15 05:03:40
【问题描述】：

如何将一些文本输入字段（垂直）与 CSS 对齐？例如：

<form action='<?= $_SERVER['PHP_SELF']; ?>' method='post'>
            <p><label for='username' class=''>Username:</label>
            <input type='text' name='username' id='username' class='field' value='' tabindex='10' /></p>
            <p><label for='password' class=''>Password:</label>
            <input type='text' name='password' id='password' class='field' value='' tabindex='20' /></p>
            <p><label for='e-mail' class=''>E-mail:</label>
            <input type='text' name='e-mail' id='e-mail' class='field' value='' tabindex='35' /></p>
            <p><input type='submit' name='insert' id='insert' class='button' value='Insert!' tabindex='40' /></p>
    </form>

除了使用表格，我还能做什么？

谢谢帕特里克

【问题讨论】：

我不明白，你想垂直对齐什么以及与什么相关？
您的代码结果对我来说看起来很垂直...您确定不是水平的吗？如果是这样，您应该在<label>s 上使用float: left; width: 200px;。
只是好奇：我知道表格不适合屏幕阅读器（等...），但是使用表格会是一种糟糕的情况吗？到目前为止，这似乎是代码量最少的最简单的选择。屏幕阅读器不是从左到右一次读取一行吗？

标签： css vertical-alignment

【解决方案1】：

我认为您的意思是希望文本框彼此对齐，如下所示。提示：使用 Internet Explorer 开发工具、Firefox 的 FireBug 或 Opera 的 Dragonfly 来调整页面中的样式属性。

<form action='' method='post'>
<div style='clear:both'>
    <label style='float:left;width:5em;display:block' for='username' class=''>Username:</label>
    <input style='float:left;display:block' type='text' name='username' id='username' class='field' value='' tabindex='10' />
<div>
<div style='clear:both'>
    <label style='float:left;width:5em;display:block' for='password' class=''>Password:</label>
    <input style='float:left;display:block' type='text' name='password' id='password' class='field' value='' tabindex='20' />
</div>
<div style='clear:both'>
    <label style='float:left;width:5em;display:block' for='e-mail' class=''>E-mail:</label>
    <input style='float:left;display:block' type='text' name='e-mail' id='e-mail' class='field' value='' tabindex='35' />
</div>
<div style='clear:both'>
    <input style='width:5em;display:block' type='submit' name='insert' id='insert' class='button' value='Insert!' tabindex='40' />
</div>

【讨论】：