html - ul 比 parent 宽

Question

我正在制作一个可以滑动的“菜单”。我的问题是如何使 ul 的宽度适合 li 的宽度，即使它比父 div 的宽度更宽。

我用 html 和 css 做了一个简单的例子:

html:

<div class="parent">
  <ul class="child">
    <li>first</li>
    <li>second</li>
    <li>third</li>
  </ul>
</div>

和CSS:

.parent {width:50%;height:50px;background-color:#000;overflow:hidden}
ul {padding:0px;}
ul li {width:150px;background-color:#fff;display:inline-block;}

这是 fiddle :https://jsfiddle.net/g1pbg5so/

提前致谢。

Answer 1

如果我没理解错的话，无论 div 的宽度如何，您要做的就是始终将 li 放在一行上。

如果是这种情况，那么只需添加

.parent ul {
    white-space:nowrap;
}

更新的片段:

.parent {
  width: 50%;
  height: 50px;
  background-color: #000;
  overflow: hidden
}
ul {
  padding: 0px;
  white-space: nowrap;
}
ul li {
  width: 150px;
  background-color: #fff;
  display: inline-block;
}

<div class="parent">
  <ul class="child">
    <li>first</li>
    <li>second</li>
    <li>third</li>
  </ul>
</div>