風格無序列表中奇怪的換行符？

我遇到了一個非常奇怪的特定問題，我將嘗試將代碼粘貼到此處，而不會將問題混淆得太多。我有一個無序的列表，它使用樣式表將每個列表項放入一個小方塊中......但是在某個點之後，該行會打破一切。如果你添加或拿走不同的東西，換行符就會四處移動，我不能爲了我的生活而弄清楚發生了什麼。風格無序列表中奇怪的換行符？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1"> 
<link rel="stylesheet" type="text/css" href="primaryStyle.css" /> 
</head> 

<body> 
<center> 

    <table class="table" border="0" width="750"> 
    <tr> 
     <td> 
     <div id="productresults"> 


        <ul class="productlist" > 
              <li class="productresultli"><center> 
         <span id="Span3">Seasonal Fruit Tray</span><br /> 
         <span id="Span4">$9.00</span><br /></center> 
        </li> 
        <li class="productresultli"><center> 
         <span id="Span5">Seasonal Fruit Tray</span><br /> 
         <span id="Span6">$9.00</span><br /></center> 
        </li> 

        <li class="productresultli"><center> 
         <span id="Span17">Seasonal Fruit Tray</span><br /> 
         <span id="Span18">$9.00</span><br /></center> 
        </li> 

        <li class="productresultli"><center> 
         <span id="ContentPlaceHolder1_lvProducts_NameLabel_12">Mayonaise</span><br /> 
         <span id="ContentPlaceHolder1_lvProducts_PriceLabel_12">$5.00</span><br /></center> 
        </li> 

        <li class="productresultli"><center> 
         <span id="ContentPlaceHolder1_lvProducts_NameLabel_13">Ketchup</span><br /> 
         <span id="ContentPlaceHolder1_lvProducts_PriceLabel_13">$3.50</span><br /></center> 
        </li> 

        <li class="productresultli"><center> 
         <span id="ContentPlaceHolder1_lvProducts_NameLabel_14">Raspberry Chiptole Sauce</span><br /> 
         <span id="ContentPlaceHolder1_lvProducts_PriceLabel_14">$10.00</span><br /></center> 
        </li> 


        <li class="productresultli"><center> 
         <span id="ContentPlaceHolder1_lvProducts_NameLabel_14">Raspberry Chiptole Sauce</span><br /> 
         <span id="ContentPlaceHolder1_lvProducts_PriceLabel_14">$10.00</span><br /></center> 
        </li> 

        <li class="productresultli"><center> 
         <span id="ContentPlaceHolder1_lvProducts_NameLabel_14">Raspberry Chiptole Sauce</span><br /> 
         <span id="ContentPlaceHolder1_lvProducts_PriceLabel_14">$10.00</span><br /></center> 
        </li> 

        <li class="productresultli"><center> 
         <span id="ContentPlaceHolder1_lvProducts_NameLabel_14">Raspberry Chiptole Sauce</span><br /> 
         <span id="ContentPlaceHolder1_lvProducts_PriceLabel_14">$10.00</span><br /></center> 
        </li> 

        <li class="productresultli"><center> 
         <span id="ContentPlaceHolder1_lvProducts_NameLabel_14">Raspberry Chiptole Sauce</span><br /> 
         <span id="ContentPlaceHolder1_lvProducts_PriceLabel_14">$10.00</span><br /></center> 
        </li> 
        <li class="productresultli"><center> 
         <span id="ContentPlaceHolder1_lvProducts_NameLabel_13">Ketchup</span><br /> 
         <span id="ContentPlaceHolder1_lvProducts_PriceLabel_13">$3.50</span><br /></center> 
        </li> 
        <li class="productresultli"><center> 
         <span id="ContentPlaceHolder1_lvProducts_NameLabel_13">Ketchup</span><br /> 
         <span id="ContentPlaceHolder1_lvProducts_PriceLabel_13">$3.50</span><br /></center> 
        </li> 

        <li class="productresultli"><center> 
         <span id="Span17">Seasonal Fruit Tray</span><br /> 
         <span id="Span18">$9.00</span><br /></center> 
        </li> 

        <li class="productresultli"><center> 
         <span id="ContentPlaceHolder1_lvProducts_NameLabel_12">Mayonaise</span><br /> 
         <span id="ContentPlaceHolder1_lvProducts_PriceLabel_12">$5.00</span><br /></center> 
        </li> 

        <li class="productresultli"><center> 
         <span id="ContentPlaceHolder1_lvProducts_NameLabel_13">Ketchup</span><br /> 
         <span id="ContentPlaceHolder1_lvProducts_PriceLabel_13">$3.50</span><br /></center> 
        </li> 

        <li class="productresultli"><center> 
         <span id="ContentPlaceHolder1_lvProducts_NameLabel_14">Raspberry Chiptole Sauce</span><br /> 
         <span id="ContentPlaceHolder1_lvProducts_PriceLabel_14">$10.00</span><br /></center> 
        </li> 

       </ul> 


     </div></td></tr> 
    </table> 
</center> 

</body> 
</html>

這是我使用（primaryStyle.css）樣式表

body 
{ 
margin: 20px 0;  
padding: 0; 
font: Verdana, Arial, Helvetica, sans-serif; 
color: #000; 
background-attachment: fixed; 
text-align: center; 
height: 100%; 
background: #ABCDEF; 
} 


.productresultli 
{ 
display: inline; 
float: left; 
margin-right: 15px; 
margin-bottom: 15px; 
width: 113px; 
padding: 5px; 
text-align: center; 
} 

.productlist 
{ 
float: left; 
}

沒有人有任何想法，爲什麼發生這種情況？任何幫助，將不勝感激。如果我不太合理，請告訴我。謝謝！

來源

2012-02-08 Raleigh Chen

會一直爲大家如此輕鬆識別您的問題，如果你發佈一個鏈接到演示頁面或至少一個屏幕截圖，展示問題。 – Arnold 2012-02-08 04:50:45

一個jsfiddle會很有幫助。此外，'

'標籤已被棄用，您應該清除列表中的那些醜陋'
'標籤，並使用填充和/或邊距。爲什麼你用桌子呢？在這裏沒有意義...... – elclanrs 2012-02-08 04:55:22

'float：left'會導致'display：inline'被忽略，因爲它對浮動元素沒有意義。你還沒有指定哪個瀏覽器，以及其他瀏覽器是否有相同的問題。 – 2012-02-08 05:03:24

li元素的變化高度導致元素被不均勻地放置。例如，如果您定義了一個固定的高度，例如height:200px，您會注意到li's正確對齊。由於個人li's的高度不同，並且每個li具有margin-bottom，所以根據可用空間排列列表項目。設置一個固定的高度，並且li's將正確對齊。

我爲您創建了一個小提琴來得好，撥弄 - http://jsfiddle.net/2YSdT/1/

來源

2012-02-08 05:01:30

真棒，小提琴的整潔，以前沒有用過。我一回家就會試試這個 – 2012-02-08 14:50:20

通過你發佈的代碼後看，我認爲你所描述的是由不清除浮動造成的。爲了解決這個問題，將類最後添加到每行的最終列表項中。然後使用僞類：after清除它們，如下所示。

HTML

<ul> 
    <li>Item</li> 
    <li>Item2</li> 
    <li class="last">Item3</li> 
</ul>

CSS

li:after { 
    clear:both; 
}

來源

2012-02-08 05:06:31 aronkerr

風格無序列表中奇怪的換行符？

回答

相關問題