Question

我在父元素中居中并修复了宽度子元素。当水平滚动出现时，例如在移动设备上，父母宽度变得小于孩子，并且因为父母背景颜色看起来很难看，我该如何解决这个问题呢？

.parent {
  background: #555;
}

.child {
  width: 1000px;
  margin: 0 auto;
  color: red;
  font-size: 50px;
}

<body>
  <div class="parent">
    <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quas aut reiciendis quaerat, possimus, quidem veniam et sequi ullam labore obcaecati iure alias iusto atque explicabo facere, aperiam nobis quam.</div>
  </div>
</body>

Answer 1

编辑：.parent inline-block与min-width: 100%一致，使其增长到适合浏览器，但也不会缩小到小于其内容 < / p>

.parent {
  background: #555;
  display: inline-block;
  min-width: 100%;
}

.child {
  width: 1000px;
  color: red;
  font-size: 50px;
}

<div class="parent">
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quas aut reiciendis quaerat, possimus, quidem veniam et sequi ullam labore obcaecati iure alias iusto atque explicabo facere, aperiam nobis quam.</div>
</div>

基于您提供的代码的三个选项：

将宽度放在.parent元素上

.parent {
  background: #555;
  width: 1000px;
}

.child {
  color: red;
  font-size: 50px;
}

<div class="parent">
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quas aut reiciendis quaerat, possimus, quidem veniam et sequi ullam labore obcaecati iure alias iusto atque explicabo facere, aperiam nobis quam.</div>
</div>

使.parent成为内联块，以便它根据内容增长

.parent {
  background: #555;
  display: inline-block;
}

.child {
  width: 1000px;
  color: red;
  font-size: 50px;
}

<div class="parent">
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quas aut reiciendis quaerat, possimus, quidem veniam et sequi ullam labore obcaecati iure alias iusto atque explicabo facere, aperiam nobis quam.</div>
</div>

使.parent元素可滚动

.parent {
  background: #555;
  overflow: auto;
}

.child {
  width: 1000px;
  color: red;
  font-size: 50px;
}

<div class="parent">
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quas aut reiciendis quaerat, possimus, quidem veniam et sequi ullam labore obcaecati iure alias iusto atque explicabo facere, aperiam nobis quam.</div>
</div>

父母宽度自动和儿童固定宽度

1 个答案: