Question

我有一个非常奇怪的具体问题，我将尝试将代码粘贴到此处，而不会过多地混淆问题。我有一个无序列表，它使用样式表将每个列表项放入一个小方块......但是在某一点之后，该行突破了。如果你添加或删除不同的，换行符会移动，我不能在我的生活中找出正在发生的事情。

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

有没有人知道为什么会这样？任何帮助，将不胜感激。如果我没有意义，请告诉我。谢谢！

Answer 1

li元素的不同高度导致元素放置不均匀。例如，如果您定义了一个固定的高度height:200px，您会注意到li's正确对齐。由于个人li's的高度不同且每个li都有margin-bottom，因此列表项目将根据可用空间进行排列。设置固定高度，li's将正确对齐。

我为你创造了一个小提琴，摆弄 - http://jsfiddle.net/2YSdT/1/

Answer 2

查看您发布的代码后，我认为您所描述的内容是由于没有清除您的花车而造成的。要解决此问题，请将类最后添加到每行的最终列表项。然后使用伪类：after清除它们，如下所示。

<强> HTML

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

<强> CSS

li:after {
  clear:both;
}

样式无序列表中的奇怪换行符？

2 个答案: