Question

我在width: 100%内<div>的{{1}}设置了width的几个文本框，它们位于右边的div之外，我不知道＃39;明白，为什么？

此外，这里的代码（与小提琴相同）：

350px

CSS：

<body>       
    <div class="centerthis">
    <form method="post" action="~/AJAXcalls/InsWrkOAJAX.cshtml">
        <div class="insertWorkoutFormHolder">
            <label class="radioLabel" for="typ4">Primary</label>
            <input type="radio" name="Type" id="typ4" value="4" class="radioSelect"><br />
            <label class="radioLabel" for="typ5">Secondary</label>
            <input type="radio" name="Type" id="typ5" value="5" class="radioSelect" /><br />
            <label class="radioLabel" for="typ6">Assistance</label>
            <input type="radio" name="Type" id="typ6" value="6" class="radioSelect" /><br />
            <br>
            <div class="hideThis">
                <label class="radioLabel" for="hej1">Squat</label>
                <input class="radioSelect" type="radio" name="Exercise" id="hej1" value="1" />
            </div>
            <br />
            <div class="hideThis">
                <label class="radioLabel" for="hej2">Benchpress</label>
                <input class="radioSelect" type="radio" name="Exercise" id="hej2" value="2" />
            </div>
            <br />
            <div class="hideThis">
                <label class="radioLabel" for="hej3">Deadlift</label>
                <input class="radioSelect" type="radio" name="Exercise" id="hej3" value="3" />
            </div>
            <br />

            <div>
                <input id="dailyPR" placeholder="Daily Max..." name="dailyPR" type="text" size="50" value="" class="hideThis insertWorkoutBoxes" />
            </div>
            <!-- Textbox for amount of weight. -->
            <div>
                <input placeholder="Weight..." name="Kg" type="text" size="50" value="" class="insertWorkoutBoxes" />
            </div>
            <!-- Textbox for number of sets. -->
            <div>
                <input placeholder="Number of sets..." name="Sett" type="number" size="50" value="" class="insertWorkoutBoxes" />
            </div>
            <!-- Textbox for number of reps. -->
            <div>
                <input placeholder="Number of reps..." name="Rep" type="number" size="50" value="" class="insertWorkoutBoxes" />
            </div>
            <!-- Textbox for date of workout. -->
            <input placeholder="" type="text" spellcheck="false" autocomplete="off"
                   class="datepicker workoutVariSelect capitalFirst" name="Date" value="" readonly="readonly" />
            <div>
                <!-- Form submit button. -->
                <br /><a class="AddBtn">Add</a>
            </div>
        </div>
    </form>
    </div>

</body>

Answer 1

在大多数表单元素上设置了一些默认的填充和边框，例如<input type="text">。您可以将box-sizing: border-box与width: 100%一起应用，以便padding和border成为width总数的一部分。

＆＃13;

div {
  width: 200px;
  outline: 1px solid aqua;
}

input {
  width: 100%;
}

.border-box {
  box-sizing: border-box;
}

＆＃13;

<div>
  <input type="text">
</div>

<div>
  <input type="text" class="border-box">
</div>

＆＃13;

Answer 2

原因是输入字段中的填充不考虑宽度100％。您应该使用box-sizing: border-box;

文本框超出<div>容器的宽度

2 个答案: