версия для печати всплывающего списка

Question

У меня есть список телефонных номеров, которые я хочу напечатать в дружественной версии.

У меня есть распечатка css для правильной печати на бумаге, расширения расположены в неупорядоченном списке, которые расположены слева.

<ul>
  <li>Larry Hughes <span class="ext">8291</span></li>
  <li>Chuck Davis <span class="ext">3141</span></li>
  <li>Kevin Skillis <span class="ext">5115</span></li>
</ul>

Я плаваю влево, и когда он печатает вторую страницу, он оставляет часть имени в списке (в Firefox, отлично работает в Google Chrome и IE), см. Здесь: http://cl.ly/de965aea63f66c13ba32

Я имею в виду следующее: http://www.alistapart.com/articles/goingtoprint/ - они упомянули что-то о применении поплавка: нет; к содержательной части страницы. Если я сделаю это, как мне сделать так, чтобы список отображался в 4 столбцах? Это динамический список, извлекаемый из базы данных.

Любая помощь приветствуется.

Answer 1

Если цель списка - связать имена с расширениями, то <a href="http://w3.org/TR/html401/struct/lists.html#edef-DL" rel="nofollow noreferrer">dl</a> или table будет более подходящим. Если цель списка - просто перечислить имена, а расширения просто… дополнительные, я думаю вы в порядке с ul - что касается ul, этот CSS, кажется, работает нормально здесь:

/**/@media print {
ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font: 12px/18px sans-serif;
}
li {
    float: left;
    width: 24%;
    margin: 0 1% 0 0;
    position: relative;
    border-bottom: 1px solid gray;
}
li 
span {
    position: absolute;
    right: 0;
    top: 0;
}
/**/}