1

可能重复：
CSS 中的水平滚动条

我有一个 320px 宽DIV。里面有一个UL LI导航，每个导航都LI向左浮动以在一行中显示它们。我希望它们彼此相邻堆叠并在父级底部显示一个滚动条以DIV水平滚动内容。

  • 不知道LIs的个数（动态生成）
  • 我不知道UL（动态生成）的宽度
  • 多个项目必须一次可见，而不仅仅是一次！

  • 我想使用纯 CSS 方法来解决这个问题。

     #menu
 {
    width: 320px;
    overflow: scroll;
 }

 ul li
 {
    float: left;
    display: block;
 }

 <div id="menu">
    <ul>
       <li><a href="#">Car</a></li>
       <li><a href="#">Very long text item</a></li>
       <li><a href="#">Foobar foobar</a></li>
    </ul>
 </div>

问题：它不起作用。没有水平滚动条。浮点数在父 DIV 中以多行形式包装和堆叠。

4

4 回答 4

3

您还需要浮动<ul>左边，并给它一个疯狂的大负边距，以确保它的宽度始终超过外部 DIV 的宽度。像这样：

#menu
{
  width: 320px;
  overflow: auto;
}

ul
{
  float: left;
  margin-right: -30000px;
}

ul li
{
  float: left;
  display: block;
}

UL 上的float: left确保您没有由巨大边缘造成的所有额外空白。

jsfiddle：http: //jsfiddle.net/8SEQT/5/

于 2012-07-13T05:26:48.923 回答
1

试试这个..分配每个<li>..的宽度

li
{
    width:100px;
    float:left;
    display:block;
    margin-right:-110px
}

将margin-right:-xxxpx始终在每个项目之后留下一些 xxxpx 空间以容纳另一个项目，从而防止列表项进入下一行......

于 2012-07-13T05:14:17.570 回答
1

获得水平滚动的唯一方法是 UL 比#menu 宽。

由于您不知道您将拥有多少个元素，您可以将您的 UL 元素设置为随机的高宽度，例如 ul {width:9000px;}将所有浮动 LI 元素保持在一行中。

另外，我会将您的#menu 设置为溢出：自动而不是溢出：滚动。

于 2012-07-13T05:33:26.640 回答
0

尝试这个。您甚至可以计算每个 li 的宽度并将其添加到 var 中，然后将其设置为菜单的宽度。

http://jsfiddle.net/jxA3d/

/更新/

我已将其更新为完全动态的。

于 2012-07-13T05:33:22.210 回答