我一直在尝试使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>
答案 0 :(得分:3)
由于box model的设计方式,大多数CSS中有用的“重置”是* { box-sizing: border-box; }
。使用普通框模型时,会将边框和边框添加到元素的宽度。因此,“ 100%宽”元素实际上是100%+边框+填充。 border-box
对此进行了更改,以使宽度+边框+填充为100%。
另外:如果要使用inline-block
彼此相邻地创建两个“宽度为50%”的元素,则需要使用负的页边距或技巧来删除标记中元素之间的空白。这是HTML中的一个小烦恼,您可以在下面的代码段中看到我通过进行</div
进行了修复,然后在下一行><div class="user-input">
的最后一个括弧中插入了少量空格,{{ 1}}元素,如果您的标记之间有空格。
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%;
}
答案 1 :(得分:0)
box-sizing:border-box
给父母和孩子。
答案 2 :(得分:0)
尝试
.challenger2 {
postion: relative;
overflow: hidden;
}
.user-input {
float: left;
border: 1px solid red;
height: 100px;
width: 50%;
box-sizing: border-box;
}
.user-input input {
display: inline-block;
width: 100%;
box-sizing: border-box;
}