Html 使用百分比和浮点强制溢出-x

我在容器中有一个

的小结构，我试图使

溢出-x

出现，而不是

溢出-y

，但我无法实现这一点，我假设这是由于属性

浮点数

和我使用的百分比造成的

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

代码如下：

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>​

---

这里有一个

听起来像是你在尝试制作一个旋转木马，有很多方便的jquery插件可供使用。无论如何，你不能用宽度的百分比来做这件事，你必须给你的主容器一个固定的宽度，然后给你的内部容器（你的ul）任何你想要的更大的宽度。您必须在UL上强制设置一个宽度，否则LI元素将仅包裹。完成后，只需在主容器中添加一个“overflow-x:auto”，您就可以上路了

举个例子

---

我现在正在使用我的ipad，没有看到滚动条，但它确实在滚动。你会注意到滚动一直持续到结束，如果你知道你想要什么，你可以调整宽度。如果是动态的，那么您需要js根据其中的元素调整宽度。我也没有正确的高度，但这足以让我明白这一点。（在我的ipad上再次这样做，编码并不是最棒的）

你到底想在这里实现什么？我很难理解。您永远不会出现

overflow-x

，因为这些元素的跨度永远不会大于基于CSS的父元素。@Ohgodwhy:是的，这就是问题所在，有没有办法解决我的

overflow-x

将出现的问题？如果你说我需要改变结构，请随便说，接受任何提示。：）@Ohgodwhy：想象一下，我的容器只接受4个盒子，比这个还要多，

overflow-x

出现。

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