1

我在容器内部有一个小结构，<li>我想做的是强制overflow-x出现而不是overflow-y，但我无法做到这一点，我认为这是因为属性float和我正在使用的百分比。

我有办法达到这个结果吗？只显示水平溢出？

这是代码：

html

 <div id="CockpitCenter">
    <ul class="CockpitContainerResult">
      <li><div class="box">Box 1</div></li>
      <li><div class="box">Box 2</div></li>
      <li><div class="box">Box 3</div></li>
      <li  style="height: 400px;">
          <div class="box" style="height: 370px;">Box 4</div>
      </li>
      <li><div class="box">Box 5</div></li>
      <li><div class="box">Box 6</div></li>
      <li><div class="box">Box 7</div></li>
   </ul>
 </div>​

和CSS

#CockpitCenter {
   height: 500px; /* set only here in jsFiddle */
   position: fixed;
   left: 0;
   border: solid 2px #ccc;
   border-bottom: none;
   overflow: auto;
}

div#CockpitCenter ul.CockpitContainerResult {
   float: left;
   width: 100%;
}

ul.CockpitContainerResult li {
   margin: 5px 0;
   height: 150px;
   width: 50%;
   float: left;
}

ul.CockpitContainerResult li:nth-child(even) {
    float: right;
}

ul.CockpitContainerResult li div.box {
    border: solid 1px #ccc;
    margin: 15px;
    border-radius: 20px;
    height: 150px;
    text-align: center;
}​

这是一个演示

4

1 回答 1

0

听起来你正在尝试制作一个轮播，有很多方便的 jquery 插件。无论如何，你不能使用宽度百分比来做到这一点，你必须给你的主容器一个固定的宽度，然后给内部容器（你的 ul）你想要的任何更大的宽度。您必须在 UL 上强制设置宽度，否则 LI 元素只会换行。完成后，只需在主容器中添加一个 'overflow-x: auto' ，您就应该可以上路了。

快速示例，http://jsfiddle.net/ybJ6C/8/

我现在正在使用我的 ipad，并没有看到滚动条，但它确实滚动。你会注意到滚动一直持续到最后，如果你知道你想要什么，你可以用宽度调整它。如果它是动态的，那么您将需要 js 根据其中的元素为您调整宽度。我也没有正确的高度，但它足以得到这个想法。（再次从我的 ipad 执行此操作，编码不是最好的）

于 2012-07-19T22:30:18.327 回答