0

Web サイト テンプレートをダウンロードして、その部分の表示方法を変更しようとしています。デフォルトのフォーマットはほとんどの入力ボックスで問題ありませんが、いくつかの小さな変更を加えようとすると、完全に壊れてしまいます。

ここに画像の説明を入力

IP 割り当てフィールドは問題ありません。Inventory の場合、フィールドセットを組み合わせて 2 つのボックスの間にギャップがないようにしようとしていますが、変更を加えると、この壊れた CSS が発生します。赤い線は、私が期待している場所を示していますが、正しく配置する方法がわかりません。

                <fieldset style="width:30%; float:left; margin-left: 19%; margin-right: 2%;"> <!-- to make two field float next to one another, adjust values accordingly -->
                    <label>IP Allocation</label>
                    <input type="text" style="width:92%;">
                </fieldset>
                <fieldset style="width:30%; float:left;"> <!-- to make two field float next to one another, adjust values accordingly -->
                    <label>IP Allocation</label>
                    <input type="text" style="width:92%;">
                </fieldset><div class="clear"></div>

                <p><div align="center"><h2>Inventory</h2></div><p>

                <fieldset style="width:62%; float:left; margin-left: 19%;"> <!-- to make two field float next to one another, adjust values accordingly -->
                    <label>Type</label>
                    <input type="text" style="width:25%; float:left; margin-right: 2%;">
                    <label>Item</label>
                    <input type="text" style="width:25%; float:left;">
                </fieldset><div class="clear"></div>

アップデート

コードとスタイルにいくつかの変更を加えた後、目的のレイアウトに近づけることができました。ただし、2 つのラベルを付けてから 2 つの入力を行うことは「合法」ですか? これをより正確な位置に固定できますか?

ここに画像の説明を入力

                <fieldset style="width:62%; float:left; margin-left: 19%;"> <!-- to make two field float next to one another, adjust values accordingly -->
                    <label style="width:45%;">Type</label>
                    <label style="width:45%;">Item</label>
                    <input type="text" style="width:45%; clear: left;">
                    <input type="text" style="width:45%;">
                </fieldset><div class="clear"></div>
4

2 に答える 2

0

すべてのインライン スタイルを削除し、次のようにします。

注：入力の境界線を補うために、入力の幅を少しトリミングしました

[http://jsbin.com/ohajox/1/][1]

ラベル { 幅:10%; フロート:左; }

入力 { 幅:38%; フロート:左;

}

于 2013-08-01T02:55:53.140 に答える