Html 样式混乱的列表中出现奇怪的换行符？
我遇到了一个非常奇怪的特定问题，我将尝试将代码粘贴到这里，而不会过多地混淆这个问题。我有一个无序列表，它使用样式表将每个列表项放入一个小正方形中。。。但在某一点之后，线断了，有点疯狂。如果你添加或删除不同的内容，分线就会四处移动，我一辈子都搞不清楚发生了什么Html 样式混乱的列表中出现奇怪的换行符？,html,css,stylesheet,html-lists,Html,Css,Stylesheet,Html Lists,我遇到了一个非常奇怪的特定问题，我将尝试将代码粘贴到这里，而不会过多地混淆这个问题。我有一个无序列表，它使用样式表将每个列表项放入一个小正方形中。。。但在某一点之后，线断了，有点疯狂。如果你添加或删除不同的内容，分线就会四处移动，我一辈子都搞不清楚发生了什么 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d
<!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>
有人知道为什么会这样吗？任何帮助都将不胜感激。如果我不太明白，请告诉我。谢谢 由于
liheight:200pxli的li的高度不同，并且每个li
都有一个margin-bottom
，因此将根据可用空间排列列表项。设置一个固定高度，li的
将正确对齐
我已经为您创建了一个小提琴-在查看了您发布的代码后，我认为您所描述的是由于未清除浮动而导致的。要解决此问题，请将类最后添加到每行的最后一个列表项中。然后使用pseudo类：after清除它们，如下所示
HTML
<ul>
<li>Item</li>
<li>Item2</li>
<li class="last">Item3</li>
</ul>
如果你发布了一个到演示页面的链接，或者至少是一个描述问题的屏幕截图，那么每个人都会更容易识别你的问题。JSFIDLE会很有帮助。另外，
标记已被弃用，您应该去掉列表中那些难看的
标记，改用填充和/或边距。你为什么要用桌子？这是没有意义的…float:left
导致忽略display:inline
，因为它对于浮点元素没有意义。另外，您还没有指定哪个浏览器，以及其他浏览器是否存在相同的问题。很抱歉，这是从.NET生成的代码。我试着剥掉大部分来清理它，但其中一些成功了。太棒了，小提琴很整洁，以前从未用过。我一到家就试试这个
<ul>
<li>Item</li>
<li>Item2</li>
<li class="last">Item3</li>
</ul>
li:after {
clear:both;
}