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

我遇到了一个非常奇怪的特定问题，我将尝试在不太混淆问题的情况下将代码粘贴到这里。我有一个无序列表，它使用样式表将每个列表项放在一个小正方形中。。。但在某一点之后，这条线就断了。如果你添加或删除不同的，换行符会四处移动，我一辈子都无法弄清楚发生了什么。

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

有人知道为什么会发生这种事吗？如有任何帮助，我们将不胜感激。如果我说不通，请告诉我。谢谢！

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

我为你制作了一把小提琴http://jsfiddle.net/2YSdT/1/

在查看了您发布的代码后，我认为您所描述的是由于未清除浮动而导致的。要解决此问题，请将类last添加到每行的最终列表项中。然后使用伪类：after来清除它们，如下所示。

HTML

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

CSS

li:after {
  clear:both;
}

相关内容

最新更新

热门标签：