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

这里是小提琴：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>

Answer 2

如果您希望强制所有列表项位于同一行，并让它们在其父级中滚动：

.parent {width:400px;height:50px;background-color:#000;overflow:scroll}
ul {float:left;padding:0px; whitespace: nowrap; }

将溢出更改为'scroll'并强制将ul包裹在'nowrap'

上

演示： https://jsfiddle.net/g1pbg5so/2/

比父母更广泛

2 个答案: