怎么让父极元素的宽度自动设为所有子集的宽度之和呢？或者怎么保证子集不换行？不考虑用js!

如题，因为子集的个数不确定，但是又必须保证父极的宽度足够包含子集，不让其换行？这里不能用js动态设置，请问有没有什么方法？
图片描述

css html javascript web

阅读 4k

6 个回答

✓ 已被采纳

要让父元素的宽度是所有子元素的宽度之和，那就是说跟据内容自适应，设置父元素的display: inline-block;;
要让子元素不换行，在父元素上设置white-space: nowrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      white-space: nowrap;
      display: inline-block;
      border: 1px solid #f00;
    }
    p {
      width: 100px;
      height: 100px;
      display: inline-block;
      border: 1px solid #00f;
    }
  </style>
</head>
<body>
  <div>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
  </div>
</body>
</html>

樊一

76218

发布于
2017-11-10

如果不考虑兼容性的话，用css3 的 display:box 或 display：flex ;
要是考虑兼容性的话，用table算是个解决办法吧，一行的tr，动态增加td

tony_gong

2k53861

发布于
2017-11-10

<div class="box">
    <span>1</span>
    <span>1</span>
    <span>1</span>
    <span>1</span>
    <span>1</span>
    <span>1</span>
    <span>1</span>
    <span>1</span>
    <span>1</span>
  </div>
  <style type="text/css">
    .box {
      display: inline-flex;
      flex-wrap: nowrap;
      border: 1px solid red;
      max-width: 100%;
    }
    .box span {
      width: 100px;
      height: 100px;
      border: 1px solid blue;
      margin: 10px;
      text-align: center;
      line-height: 100px;
    }
  </style>