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.

检查这个调整输入演示

于 2013-05-27T20:28:42.573 回答
0

我可以看到您在标记上使用了网格系统，您应该看看这个网格系统是否为您提供了执行此操作的选项，这将是完成您想要的更好的方法。

无论如何，你应该使用 `%` 而不是像素或自动，例如：

CSS

input{
    width: 80%;
}

如果它可能是一个 url，所以我们不能看一下，这样可以更容易地帮助你

于 2013-05-27T19:39:42.403 回答