html - 如何让div占据父级的整个宽度？

Question

我一直试图让 div(名称和猜测)占据父容器的整个宽度。无论我尝试过什么，它们都只能到达容器的 98%。如果我将每一个都设置为 50%，它们就会折叠，然后一个容器就会在另一个容器之上。他们目前设置为 49%。有什么想法吗？

.guess-section {
  border: 1px solid red;
  width: 50%;
  background-color: #F7F7F7;
}

.guess-section article {
  background-color: #FFF;
  border: 2px solid #E0E0E0;
  margin: 2%;
  /*padding: 15px;*/
}

.r-low,
.r-high {
  font-weight: 700;
  text-decoration: underline;
}

.user-input {
  display: inline-block;
  border: 1px solid red;
  height: 100px;
  width: 49%;
}

.user-input input {
  display: inline-block;
  width: 100%;
}

<article class="set-challengers">
  <p>The Current Range is <span class="r-low">1</span> to <span class="r-high">100</span></p>
  <section class="challenger2">
    <h3>Challenger 2</h3>
    <div class="user-input">
      <label for="name">
  				<span>Name</span></br>
  				<input type="text" id="name" name="user_name">
				</label>
    </div>
    <div class="user-input">
      <label for="name">
  				<span>Guess</span></br>
  				<input type="text" id="name" name="user_name">
				</label>
    </div>
  </section>
  <section class="challenger-buttons">
    <button class="submit">SUBMIT GUESS</button>
    <button class="reset">RESET GAME</button>
    <button class="clear">CLEAR GAME</button>
  </section>
</article>

Answer 1

大多数 CSS 中包含的有用“重置”是 * { box-sizing: border-box; }因为方式 box model被设计。使用普通盒模型，您的填充和边框将添加到元素的宽度。所以“100% 宽”元素实际上是 100% + 边框 + 填充。 border-box更改此设置，使宽度 + 边框 + 填充为 100%。

另外:如果你想创建两个彼此相邻的“恰好 50% 宽”的元素，使用 inline-block那么您需要使用负边距或技巧来删除标记中元素之间的空白。这是 HTML 中的一个小问题，您可以在下面的代码片段中看到我通过 </div 修复了它。然后是下一行的最后一个右括号 ><div class="user-input"> inline-block 之间放置了少量空间当您的标记中元素之间有空格时。

* {
    box-sizing: border-box;
}

.guess-section {
    border: 1px solid red;
    width: 50%;
    background-color: #F7F7F7;
}

.guess-section article {
    background-color: #FFF;
    border: 2px solid #E0E0E0;
    margin: 2%;
    /*padding: 15px;*/
}

.r-low, .r-high {
    font-weight: 700;
    text-decoration: underline;
}

.user-input {
    display: inline-block;
    border: 1px solid red;
    height: 100px;
    width: 50%;
}

.user-input input {
    display: inline-block;
    width: 100%;
}

<article class="set-challengers">
        <p>The Current Range is <span class="r-low">1</span> to <span class="r-high">100</span></p>
        <section class="challenger2">
        <h3>Challenger 2</h3>
            <div class="user-input">
                <label for="name">
                <span>Name</span></br>
                <input type="text" id="name" name="user_name">
                </label>
            </div
            ><div class="user-input">
                <label for="name">
                <span>Guess</span></br>
                <input type="text" id="name" name="user_name">
                </label>
            </div>
        </section>
        <section class="challenger-buttons">
            <button class="submit">SUBMIT GUESS</button>
            <button class="reset">RESET GAME</button>
            <button class="clear">CLEAR GAME</button>
        </section>
</article>