【技巧】怎么横向撑开父节点

  • 背景:父节点需要固定宽度,子节点长度不定,父节点overflow-x:scroll;
  • 解决方案:
    • 1、js动态计算出子节点的宽度
    • 2、方法1显得是有点冗余了,正确的打开方式



    
    


    
  • 原理:
    关键在于:white-space: nowrap;
    这个样式的作用常用于让文字不要换行。
    这边这样写,就是使子元素中的元素都是inline的状态,然后使其不换行,撑开父节点,这样就能免于js的计算。
    兼容性目前没有大面积测过,用过的几个场景暂时没有问题。

你可能感兴趣的:(【技巧】怎么横向撑开父节点)