Question

是否可以将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>

Answer 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

Answer 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（在您的示例中），我的答案将无效。

Answer 3

可能？是的，这是一个快速破解甚至：

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

所以看起来像这样：

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

这是jsfiddle。

对齐选择和输入

3 个答案: