时间戳

首页 > 解决方案 > 当父级溢出时如何使子级div占用所有水平空间：滚动

html - 当父级溢出时如何使子级div占用所有水平空间：滚动

问题描述

我希望有一个子 div，其中一行文本，背景颜色覆盖整行，在父 div 内，最大宽度，并且能够沿 x 轴滚动。

背景颜色必须在子元素上，因为子元素（有多个子元素）将具有不同的颜色。所有子元素必须具有相同的宽度。

我只想在子元素上使用 CSS 而没有硬编码数字。

我的问题是子元素没有覆盖整行，水平滚动就可以看到问题。

重现我的问题：

.parent {
  width: 400px;
  max-width: 400px;
  overflow: scroll;
}

.child {
  white-space: nowrap;
  background: skyblue;
}

<div class="parent">
  <div class="child">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
     Aenean massa. 
  </div>
  <div class="child">second child</div>
  <div class="child">third child</div>
</div>

或https://codepen.io/alawiii521/pen/rNObXrm

标签： htmlcss

解决方案

您可以通过将文本包装在这样的跨度中并将颜色添加到跨度来实现此目的。

.parent {
  width: 400px;
  max-width: 400px;
  overflow: scroll;
}

.child {
  white-space: nowrap;
  display:table-row;
  background: skyblue;
}
<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
  </div>
  <div class="child">second child</div>
  <div class="child">third child</div>
</div>

编辑：只需将 display:table 添加到子类，它将起作用

推荐阅读