Question

晚上好，

我想要一个其父级宽度<100％>的div只能水平扩展。如果当前宽度有两个子元素，则必须显示HORIZONTAL滚动条。每个子元素具有相同的宽度（200px），并且它们都应显示在同一行中。

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

我该怎么做？具有“child”类的所有Div必须显示在一行，相同的行中，当行太宽而且它的div时，应该有可能滚动HORIZONTAL。

Answer 1

将内部元素设置为内嵌块并将其添加到容器中（并关闭DIV标记...）：

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

您可以修改它以满足您的要求：）

强制水平滚动条和所有子div在一行中

2 个答案: