强迫水平滚动栏和所有儿童divs一行

Question

晚上好，

我想要一个其父级宽度的div才能水平扩展。如果用于当前宽度的子元素太多，则必须出现水平滚动栏。每个子元素都有相同的宽度（200px），它们都应以同一行显示。

<div id="parent">
    <div id="width-100-div">
        <div class="child">
        <div class="child">
        <div class="child">
        <div class="child">
        ...
    </div>
</div>

我该怎么做？所有班级都要"儿童"必须以一条线，同一条线的形式显示，当线太宽以使其div时，应该有可能水平滚动。

Answer 1

使您的内部元素内联块并将其添加到容器中（并关闭Div-Tags ...）：

#width-100-div {
  overflow-x: visible;
  white-space: nowrap;
}

#width-100-div {
  overflow-x: visible;
  white-space: nowrap;
}
.child {
  display: inline-block;
  width: 300px;
  height: 100px;
  background: green;
  border: 1px solid red;
}

<div id="parent">
  <div id="width-100-div">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

Answer 2

您可以使用 display: flex 实现这一目标。按照下面的代码

.parent {
	background-color: dodgerBlue;
	padding: 1em;
	width: 90%;
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	margin-left: auto;
	margin-right: auto;
}
.child {
	background-color: tomato;
	padding: 1em;
	margin-left: 0.5em;
	margin-right: 0.5em;
	color: white;
}

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
	<div class="child">10</div>
	<div class="child">11</div>
	<div class="child">12</div>
	<div class="child">13</div>
	<div class="child">14</div>
	<div class="child">15</div>
	<div class="child">17</div>
	<div class="child">18</div>
	<div class="child">19</div>
	<div class="child">20</div>
</div>

您可以对其进行修改以满足您的要求：）