强制溢出x使用百分比和浮动

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

有没有我可以达到这个结果的方式？只显示水平溢出？

这里是代码：

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

这里是一个demo

来源

2012-07-19 Ricardo Binns

你到底想要达到什么目的？我无法理解。你永远不会得到一个'overflow-x'出现，因为这些元素永远不会超过基于CSS的父元素。 – Ohgodwhy 2012-07-19 18:43:35

@Ohgodwhy：是的，这是问题所在，有没有办法达到我的'overflow-x'会出现的解决方案？如果你说我需要改变结构，请当我的客人说，接受任何提示。 :) – 2012-07-19 18:57:21

@Ohgodwhy：假设我的容器只接受4个盒子，然后出现'overflow-x'。 – 2012-07-19 19:00:38

听起来像你试图制作一个旋转木马，其中有许多方便的jQuery插件。无论如何，你不能用百分比来表示宽度，你必须给你的主容器一个固定的宽度，然后给你内部的一个（你的ul）任何你想要的宽度。您必须在UL上强制一个宽度，否则LI元素将只包裹。一旦完成，只需将“overflow-x：auto”添加到主容器中，并且您应该在途中。

简单的例子，http://jsfiddle.net/ybJ6C/8/

我用我的iPad现在，并没有看到滚动条，但它确实滚动。你会注意到滚动继续结束，如果你知道你想要什么，你可以用宽度来调整它。如果它的动态，那么你需要js根据里面的元素为你调整宽度。我也没有正确的身高，但它足以让人想到。（再次从我的ipad做到这一点，编码不是最大的）

来源

2012-07-19 22:30:18 Waterboy

强制溢出x使用百分比和浮动

回答

相关问题