Странные разрывы строк в неупорядоченном списке? - PullRequest
Новая
       12

Странные разрывы строк в неупорядоченном списке?

0 голосов
/ 08 февраля 2012

У меня очень странная конкретная проблема, и я попытаюсь вставить сюда код, не путая проблему слишком сильно. У меня есть неупорядоченный список, который использует таблицу стилей, чтобы поместить каждый элемент списка в маленький квадрат ... но после определенного момента строка ломается, как сумасшедший. Если вы добавляете или убираете разные, разрывы строк перемещаются, и я не могу на всю жизнь понять, что происходит. 

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

У кого-нибудь есть идея, почему это происходит? Любая помощь будет оценена. Если я не совсем понимаю, пожалуйста, дайте мне знать. СПАСИБО!

Ответы [ 2 ]

1 голос
/ 08 февраля 2012

Различная высота элементов li приводит к неравномерному расположению элементов.Например, если вы определите фиксированную высоту, скажем, height:200px, вы заметите, что li's выровнены правильно.Поскольку высоты отдельных li's различны и каждый li имеет margin-bottom, элементы списка располагаются в зависимости от доступного пространства.Установите фиксированную высоту, и li's выровняется должным образом.

Я создал скрипку, чтобы вы хорошо поиграли с - http://jsfiddle.net/2YSdT/1/

0 голосов
/ 08 февраля 2012

После просмотра кода, который вы опубликовали, я думаю, что то, что вы описываете, вызвано тем, что вы не очистили свои поплавки.Чтобы исправить это, добавьте последний класс к последнему элементу списка в каждой строке.Затем используйте псевдокласс: after, чтобы очистить их, например, следующим образом.

HTML 

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

CSS 

li:after {
  clear:both;
}
...