強制溢出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使用百分比和浮動

回答

相關問題