当前位置：文江博客话题详情

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

发布于 2022-09-06 04:05:23 字数 191 浏览 20 评论 0

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小…楫夜泊 2022-09-13 04:05:23

要让父元素的宽度是所有子元素的宽度之和，那就是说跟据内容自适应，设置父元素的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>

回复收藏 0

无声情话 2022-09-13 04:05:23

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

回复收藏 0

时光病人 2022-09-13 04:05:23

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

回复收藏 0