对齐选择和输入答案

【问题标题】：Align select and input对齐选择和输入
【发布时间】：2012-12-07 07:19:27
【问题描述】：

是否可以对齐 SELECT 和 INPUT 内联不指定 WIDTH 大小、不使用表格以及相同的 HTML？见图片。现场示例：http://jsfiddle.net/N4hpQ/ 谢谢。

<html>
<head>
<style>

fieldset {
display: inline-block;
}

fieldset input,
fieldset select{
float: right;
margin-left: 5px;   
}

fieldset p {
text-align: right;
}

</style>
</head>
<body>

<fieldset>          
<p><label>First Name: </label><input type="text" /></p>
<p><label>Second Name: </label><input type="text" /></p>
<p><label>Country: </label><select><option>Choose</option></select></p>
<p><label>Age: </label><select><option>Choose</option></select></p>
</fieldset> 

</body>
</html>

【问题讨论】：

如果不允许width，我相信这是我会选择<table> 的极少数情况之一。至少它在语义上比<p> 更正确。请注意，您当前在 HTML 中缺少 for= 属性。您可以在标签本身中包含正确的<input>/<select>，也可以添加属性。
完全没有宽度？我想不出办法，除了使用 Zeta 提到的桌子。如果有宽度，您可以将标签浮动并输入/选择到左侧，然后应用“显示：内联块；文本对齐：右；宽度：175px；” （或您需要的任何宽度）到标签元素。
我在这里放弃：jsfiddle.net/oceog/N4hpQ/10，不确定它是否适用于不同于chrome的任何浏览器
完全没有宽度，LABEL的文字是通过编码变化的。捕获只是一个例子。
@eicto 是否可以向左对齐？

标签： html css alignment label fieldset

【解决方案1】：

您可以使用 css display: table; 来实现这一点。

HTML

<fieldset>
    <p>
        <label>First Name: </label>
        <input type="text" />
    </p>
    <p>
        <label>Second Name: </label>
        <input type="text" />
    </p>
    <p>
        <label>Country: </label>
        <select>
            <option>Choose</option>
        </select>
    </p>
    <p>
        <label>Age: </label>
        <select>
            <option>Choose</option>
        </select>
    </p>
</fieldset>

CSS

fieldset {
    display: table;
}
fieldset p {
    display: table-row;
}
fieldset input, 
fieldset select, 
fieldset label {
    display: table-cell;
    margin: 3px;
}
fieldset label {
    text-align: right;
}

Demo

【讨论】：

完美@3dgoo！谢谢！

【解决方案2】：

没有TABLE 或width。

CSS：

FIELDSET {
    display: inline-block;
    line-height: 200%;
}
.labels {
    text-align: right;
    float: left;
    margin-right: 5px;
}
.inputs {
    float: left;
}

还有 HTML：

<fieldset>          
    <div class="labels">
        <label>First Name: </label><br />
        <label>Second Name: </label><br />
        <label>Country: </label><br />
        <label>Age: </label>
    </div>
    <div class="inputs">
        <input type="text" /><br />
        <input type="text" /><br />
        <select><option>Choose</option></select><br />
        <select><option>Choose</option></select>
    </div>
</fieldset>

还有fiddle

编辑

您似乎已经编辑了您的问题。如果需要相同的 HTML（如您的示例），我的回答不再有效。

【讨论】：

使用我的 HTML：
TEXT
不可能？
@FeKuLa 我认为您可以使用 eicto 小提琴中的 CSS。它使用相对单位（%）作为宽度，因此它只影响fieldset内部，您可以使用任何您想要的标签文本。

【解决方案3】：

可能吗？是的，这里有一个快速破解方法：

将您的标签向左浮动，将您的输入向右浮动，然后给输入一个边距，以将它们放置在您的标签旁边。

看起来像这样：

p label{
    float:left;
}
p input{
    float:right;
    margin-right: /*whatever value you need this to be to look good*/;
}

这里是jsfiddle。

【讨论】：

可能是 Mac 上的 Chrome 有问题，但是当我查看它时，那个小提琴排列得不是很好。你可能想仔细检查一下。
我认为您需要重新考虑您的代码，p 元素不能仅使用一些 CSS 分成两个单独的部分。小提琴在 Win7 和 FF 中看起来也很乱。
是的，JSFiddle的例子有问题。
更新了 jsfiddle、@Marvo 和 Teemu 和 Fekula，我在 Linux 上，所以我无法在 IE 中测试，但我在 chrome 和 FF 中查看。
很难在评论中解释，但在 Mac/Chrome 中，LastName 字段与 Country: 标签是水平的，而 LastName: 标签奇怪地缩进了。 =/