Как заставить div занимать всю ширину родителя?
Я пытался заставить divs (Name & Guess) занимать всю ширину родительского контейнера. Независимо от того, что я пробовал, они достигают только 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>Вы должны попробовать это с box-sizing: border-box.
Кстати, у меня есть box-sizing: border-box, я опубликовал только фрагмент, касающийся конкретного html.
Возможный дубликат Заставьте дочерние элементы div расширяться, чтобы заполнить ширину родительского элемента div.
Возможно, стоит использовать для этого CSS-сетка.
Ответы 3
Полезным «сбросом» для включения в большинство CSS является * { box-sizing: border-box; } из-за того, как спроектирован коробочная модель. В обычной блочной модели отступы и границы добавляются к ширине элемента. Таким образом, элемент «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>Я думаю, что два .user-inputdivs должны быть 50%, ОП хочет, чтобы они были рядом. Не сложены.
Да, также добавлено редактирование для удаления пробелов, чтобы получить идеальные элементы 50/50.
Хороший. Не знал про прикол whitespace в HTML. +1
box-sizing:border-box для родителя и его детей.
пытаться
.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;
}
загляни в
box-sizing: border-box;, но только не внедряй - разберись ;)