0

スケルトン css を使用して実装されたフォームがあります。私は 3 列 (つまり 3 分の 1 の列) のレイアウトを使用していましたが、列の内容のそれぞれの長さが原因で、多くの空白が生じました。次のような水平レイアウトをお勧めします。

テキストボックス1 テキストボックス2 テキストボックス3

テキストボックス4 テキストボックス5 テキストボックス6

次に、モバイルの場合は次のように折りたたまれます。

テキストボックス1

テキストボックス2

テキストボックス3

テキストボックス4

テキストボックス5

テキストボックス6

これまでのところ、これを行うことができると思っていた唯一の方法は、各テキストボックスを独自の「3 分の 1」の列にラップすることです。これを行うよりクリーンな方法はありますか？

ありがとう

4

1 に答える 1

2

クラスをテキスト ボックス (またはinput[type="text"]) と CSSに設定します。

デスクトップの場合:

.yourclass {
    width: 33%;
    float: left;
 }

モバイルの場合:

@media only screen and (max-device-width: 480px) {
    .yourclass {
         width: 100%;
         float: left;
    }
}

これ: https://mislav.net/2010/04/targeted-css/が役立つ場合があります。

于 2013-04-19T09:17:10.173 に答える