4

テーブルを使用せず、同じ HTMLを使用して、 WIDTHサイズを指定せずにインラインで 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 に答える