4

是否可以在不指定 WIDTH大小、不使用表格和使用相同 HTML的情况下内联对齐 SELECT 和 INPUT ？见图片。现场示例：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>

图片

4

3 回答 3

3

您可以使用 cssdisplay: 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;
}

演示

于 2012-12-06T22:34:39.660 回答
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>

还有小提琴

编辑

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

于 2012-12-06T19:55:03.343 回答
0

可能的？是的，这里有一个快速的技巧来做到这一点：

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

所以看起来像这样：

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

这是jsfiddle。

于 2012-12-06T19:46:55.077 回答