关于省略ul的宽度计算

Question

看到提问区有同学说这里只要触发BFC就能得到宽度，我试了下，发现应该不是BFC的原因。

而是因为ul默认是块标签，所以宽度是占据父元素100%的，不会被内容撑开，这里只要把ul的display设置成inline-block 或者设置浮动，就能让ul自适应内容宽度了。

如果是BFC的原因的话，ul设置overflow:hidden 照理说是触发BFC了，但是我试了发现并不会把宽度撑开。

希望老师指点一下我的想法对不对。

html:

<div>
      <ul>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
      </ul>
    </div>

css:

div {
  background: red;
  width: 100px;
  height: 50px;
  white-space: nowrap;
  overflow: hidden;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  /*float: left;
  display: inline-block;
  overflow: hidden;*/
}

li {
  display: inline-block
}

这个例子里float: left; 和 display: inline-block;只要设置一个就能从审查元素里看到ul的宽度超过外面的div，而只设置overflow:hidden则不行。

Answer 1

ustbhuangyi 2018-04-30 15:36:45

这个疑问的原始问题是什么呢

• 提问者 hood #1

  https://coding.imooc.com/learn/questiondetail/5403.html 这个问题

• 提问者 hood #2

  可以省略 _initPics() 方法里计算 ul 宽度的部分
  let picWidth = 120;
  let margin = 6;
  let width = (picWidth + margin) * this.seller.pics.length - margin;
  this.$refs.picList.style.width = width + 'px';

• ustbhuangyi 回复 提问者 hood #3

  实际上这个项目每个 li 都是设置了 display: inline-block，但 ul 的宽度并没有被 li 撑开

点开查看后面4条评论