Html 如何让div占据父级的全部宽度？

我一直试图让div（Name&Guess）占据父容器的全部宽度。不管我怎么做，它们都只能达到容器的98%。如果我将每一个都设置为50%，它们会崩溃，然后一个容器位于另一个容器之上。他们目前设定为49%。有什么想法吗

。猜测部分{
边框：1px纯红；
宽度：50%；
背景色：#F7F7F7；
}
.猜测部分文章{
背景色：#FFF；
边框：2px实心#e0；
利润率：2%；
/*填充：15px*/
}
r-low先生，
r-high先生{
字号：700；
文字装饰：下划线；
}
.用户输入{
显示：内联块；
边框：1px纯红；
高度：100px；
宽度：49%；
}
.用户输入{
显示：内联块；
宽度：100%；
}

电流范围为1到100

挑战者2
名字

猜

提交猜测
重置游戏
明确的游戏

大多数CSS中包含的一个有用的“重置”是

*{box size:border box；}

，这是因为CSS的设计方式。使用普通长方体模型，填充和边框将添加到元素的宽度中。所以“100%宽”元素实际上是100%+边框+填充<代码>边框框更改此选项，使宽度+边框+填充为100%

另外：如果要使用

内联块

创建两个相邻的“正好50%宽”元素，则需要使用负边距或技巧删除标记中元素之间的空白。这是HTML中的一个小麻烦，您可以在下面的代码片段中看到，我通过执行

在

内联块

元素之间放置了少量空间，而标记中元素之间存在空白

*{
框大小：边框框；
}
.猜测部分{
边框：1px纯红；
宽度：50%；
背景色：#F7F7F7；
}
.猜测部分文章{
背景色：#FFF；
边框：2px实心#e0；
利润率：2%；
/*填充：15px*/
}
.r-低、.r-高{
字号：700；
文字装饰：下划线；
}
.用户输入{
显示：内联块；
边框：1px纯红；
高度：100px；
宽度：50%；
}
.用户输入{
显示：内联块；
宽度：100%；
}

电流范围为1到100

挑战者2
名字

猜

提交猜测
重置游戏
明确的游戏

大多数CSS中包含的一个有用的“重置”是

*{box size:border box；}

，这是因为CSS的设计方式。使用普通长方体模型，填充和边框将添加到元素的宽度中。所以“100%宽”元素实际上是100%+边框+填充<代码>边框框更改此选项，使宽度+边框+填充为100%

另外：如果要使用

内联块

创建两个相邻的“正好50%宽”元素，则需要使用负边距或技巧删除标记中元素之间的空白。这是HTML中的一个小麻烦，您可以在下面的代码片段中看到，我通过执行

在

内联块

元素之间放置了少量空间，而标记中元素之间存在空白

*{
框大小：边框框；
}
.猜测部分{
边框：1px纯红；
宽度：50%；
背景色：#F7F7F7；
}
.猜测部分文章{
背景色：#FFF；
边框：2px实心#e0；
利润率：2%；
/*填充：15px*/
}
.r-低、.r-高{
字号：700；
文字装饰：下划线；
}
.用户输入{
显示：内联块；
边框：1px纯红；
高度：100px；
宽度：50%；
}
.用户输入{
显示：内联块；
宽度：100%；
}

电流范围为1到100

挑战者2
名字

猜

提交猜测
重置游戏
明确的游戏

框大小：将边框框大小调整到父项及其子项。
框大小调整：将边框框大小调整到父项及其子项。
尝试

    .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;
    }

试一试

查看
框大小：边框框，但不要实现它-理解它；）您应该尝试使用
框大小：边框框
。顺便说一句，我确实有
框大小：边框框
，只是发布了关于特定htmlPossible副本的代码片段，可能会用于此。查看
框大小：边框框，但不要实现它-理解它；）你应该用
框大小：边框框
试试。顺便说一下，我确实有
框大小：边框框
，只是发布了关于特定htmlPossible副本的片段。我认为这两个
。用户输入
divs
需要是
50%
，OP希望它们并排出现。没有堆叠。是的，还添加了一个删除空白的编辑，以获得完美的50/50元素。很好。不知道
HTML
中的
whitespace
技巧+1我认为这两个
.user input
div
应该是
50%
，OP希望它们并排出现。没有堆叠。是的，还添加了一个删除空白的编辑，以获得完美的50/50元素。很好。不知道
HTML
中的
whitespace
技巧+1.