-1

私はHTMLとCSSの専門家ではありませんが、レスポンシブなページ、テーブルレス、テーブルレスフォームなどを作成する方法を知っています...

しかし、どうしたらいいのかわからない形で立ち往生してしまいました。1行に1つのフィールドがある限り、フォームをテーブルレスにするのは簡単です。同じ行に2つのフィールドとラベルが必要になります。

純粋なcssを使用して処理したいので、それらを整列させる必要があります。実際の例は、dateFromとDateToを要求する旅行会社の形式です。

もう1つ、フレームワークSkeleton（http://www.getskeleton.com/）を使用しています。

1stlabel
|1stfield|

2ndlabel1   3rdlabel1
|2ndfield|  3rd|field|

4thlabel
|4thfield|

私の現在のマークアップ：

<form>

    <div class="field">
        <label>FieldA</label>
        <input type="text">
    </div>


    <div class="doubleFields">

        <div class="first">
            <label>DateFrom</label>
            <input type="text">
        </div>

        <div class="second">
            <label>DateTo</label>
            <input type="text">
        </div>

    </div>

</form>​
4

1 に答える 1

1

それらに特定のクラス名を付けて、それらに設定display: inline-blockします。

あなたの特定の場合：

.doubleFields div {
    display: inline-block;
}

うまくトリックを行う必要があります。

于 2012-11-26T17:53:07.537 に答える