2010-05-20 84 views
1

我有一個圖片庫,我不想給一個額外的類來第三列表項:CSS溢出:列表中一個div

<div class="row"> 
     <ul class="rowUl"> 
      <li>ssss</li> 
      <li>ssss</li> 
      <li>ssss</li> 
     </ul> 
    </div> 

和CSS

.row { 
    width: 620px; 
    clear: both; 
    overflow: hidden; 
} 

.rowUl { 
    width: 645px; 
    float: left; 
} 

.rowUl li { 
    width: 220px; 
    float: left; 
} 

但第三個列表項下降在其他行。我怎樣才能解決這個沒有額外的課程?

回答

1

220 * 3 = 660

rowUL = 645

這就是15個額外的像素推浮動DIV下來。

解決方案:

讓rowUL寬度660,使行寬660

OR:

使rowUL李寬度215

+0

是的,我的數學錯誤!謝謝 – Felicita 2010-05-20 09:00:37

+0

沒有麻煩 - 我一直在這樣做。 – Glycerine 2010-05-20 09:07:49

0

嘗試增加width645px.rowUl更大的價值,如果可行的話。

0

你有3個浮動LI元素,每220px寬。 3 * 220 = 660,但包含元素的寬度僅爲645px,因此第三個不能放入第二個元素旁邊,並落在第一個元素下面的另一行。如果你想將它們全部放在一行中,請將.rowUl的寬度設置爲660px。

此外,我不知道您是否使用某種CSS重置 - 如果您不這樣做,請注意UL和LI元素的默認邊距和填充也會影響此事實。如果你想確定它們沒有,你需要將它們設置爲0。

+0

即時通訊使用eric meyer css重置。對不起這個數學錯誤。今天我必須喝更多的咖啡:) – Felicita 2010-05-20 09:13:32

0

您已經通過645px超過寬度限行內元素的內660px(每個220px所有三個元素)

您可以通過外元素超過660px

增加寬度做

希望這會有幫助
邁拉