0

ウィンドウのサイズを小さくすると、テキストボックスの幅も縮小されないのはなぜですか?

FF、IE、Chromeで同じように見えます。ウィンドウのサイズが変更されたときにテキストボックスの幅を調整するにはどうすればよいですか?

テキスト入力に次のスタイルを与えることができます: `style="display:block;width:auto"

その後、テキストボックスはdivをオーバーフローしませんが、幅が固定されているように見え、divの終わりまで引き伸ばされないため、まったく気に入りません。

ここに画像の説明を入力

<div class="row">
    <div class="span6">
        <div class="row">
            <div style="background-color: green" class="span3">
                <span>Schoolyear name</span>
            </div>
            <div style="background-color: orange" class="span3">
                <input type="text" />
            </div>
        </div>
        <div class="row">
            <div style="background-color: red;" class="span3">
                <span>Schoolyear from</span>
            </div>
            <div style="background-color: yellow" class="span3">
                <input type="text" />
            </div>
        </div>
        <div class="row">
            <div style="background-color: red" class="span3">
                <span>Schoolyear to</span>
            </div>
            <div style="background-color: yellow" class="span3">
                <input type="text" />
            </div>
        </div>
        <div class="row">
            <div style="background-color: red" class="span3">
                <span>Start week</span>
            </div>
            <div style="background-color: yellow" class="span3">
                <label class="radio">
                    <input type="radio" />Week A</label>
                <label class="radio">
                    <input type="radio" />Week B</label>
            </div>
        </div>
        <div class="row">
            <div style="background-color: blue" class="span3">
                <span>Weekly rotation</span>
            </div>
            <div style="background-color: greenyellow" class="span3">
                <select>
                    <option>Please select</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
            </div>
        </div>
    </div>
    <div style="background-color: gray" class="span3">
        <div class="row">
            <div class="span3">Days to display</div>
            <div class="span3">
                <label class="checkbox">
                    <input type="checkbox" />Sunday</label>
                <label class="checkbox">
                    <input type="checkbox" />Sunday</label>
                <label class="checkbox">
                    <input type="checkbox" />Sunday</label>
                <label class="checkbox">
                    <input type="checkbox" />Sunday</label>
                <label class="checkbox">
                    <input type="checkbox" />Sunday</label>
                <label class="checkbox">
                    <input type="checkbox" />Sunday</label>
                <label class="checkbox">
                    <input type="checkbox" />Sunday</label>
            </div>
        </div>
    </div>
    <div class="span3">
        <div class="row">
            <div style="background-color: red" class="span3">Weeks start day</div>
            <div style="background-color: yellow" class="span3">
                <label class="radio">
                    <input type="radio" />Tuesday</label>
            </div>
            <div style="background-color: red" class="span3">
                <label class="radio">
                    <input type="radio" />Monday</label>
            </div>

        </div>
    </div>
</div>

<div class="row">
    <div style="background-color: burlywood" class="span12">99999999999999999999</div>
</div>
4

3 に答える 3

3

これでうまくいきます！

デモ

input[type="text"], select{
    width:100%;
    box-sizing: border-box;
}
于 2013-05-27T19:41:34.653 に答える
0

あなたがしなければならないことは次のとおりです。

    <div style="background-color: orange; width:100%" class="span3">
                                          ^^^^^^^^^^|________________set this as per your size in % or px
          <input type="text" style="width:50%;"
                                   ^^^^^^^^^^|___________set this in % as per your need.

このResize Input Demo を確認してください

于 2013-05-27T20:28:42.573 に答える
0

マークアップでグリッド システムを使用していることがわかりました。このグリッド システムでそれを行うためのオプションが提供されているかどうかを確認してください。それは、目的を達成するためのより良い方法です。

とにかく、それを行うには、ピクセルや自動の代わりに `%`` を使用する必要があります。例:

CSS

input{
    width: 80%;
}

また、可能であれば、私たちが見ることができないようにURLを提供していただけると、はるかに簡単にあなたを助けることができます

于 2013-05-27T19:39:42.403 に答える