Используя только CSS @media print, как мне сделать так, чтобы неупорядоченный список html занимал несколько столбцов? - PullRequest
Новая
       13

Используя только CSS @media print, как мне сделать так, чтобы неупорядоченный список html занимал несколько столбцов?

0 голосов
/ 07 мая 2019

Для браузера я использую код ниже, чтобы разбить мой неупорядоченный список на три столбца.Это прекрасно работает.

Вот список в html. 

<ul class="topics">
        <li><a href="#newStuff">Recent Changes</a></li>
        <li><a href="#open">Open an existing Net</a></li>
        <li><a href="#start">Start a Net</a></li>
        <li><a href="#rightCorner">Upper right Corner</a></li>
        <li><a href="#reports">Create Agenda, Preamble, Closing</a></li>
        <li><a href="#checkins">Enter Check-Ins</a></li>
        <li><a href="#delete">Delete an Entry</a></li>
        <li><a href="#misc">Misc. Operations</a></li>
        <li><a href="#colors">Meaning of the Display Colors</a></li>
        <li><a href="#columns">Table Columns</a></li>
        <li><a href="#grid">Updating Grid, Latitude and/or Longitude</a></li>    

        <li><a href="#sorting">About Sorting</a></li>
        <li><a href="#reports">Reports</a></li>
        <li><a href="#advanced">Advanced Topics</a></li>
        <li><a href="#advanced">Adding General Comments to the Time Log</a></li>
        <li><a href="#advanced">Using Sub-nets</a></li>
        <li><a href="#timelog">How The Time Log Works</a></li>
        <li><a href="#APRStt">What is <b style="color:#aa7941;">APRStt</b>?</a></li>
        <li><a href="#prebuild">Pre-Build nets for Events</a></li>
        <li><a href="#Responsive">Responsive Design</a></li>

     </ul>



ul {
            -moz-column-count: 3;
            -moz-column-gap: 20px;
            -webkit-column-count: 4;
            -webkit-column-gap: 20px;
            column-count: 3;
            column-gap: 20px;
        }

Как я могу сделать то же самое, когда он будет напечатан?Я попробовал это так;

@media print {
    ul {
        -moz-column-count: 2;
        -moz-column-gap: 20px;
        -webkit-column-count: 4;
        -webkit-column-gap: 20px;
        column-count: 2;
        column-gap: 20px;
    }
}

Но это не работает?UL остается одним длинным столбцом.Я не вижу ответа на этот вопрос здесь, в StackOverflow.

1 Ответ

0 голосов
/ 08 мая 2019

Хотя вопрос, заданный здесь, отличается, верхний ответ в этом посте может оказаться полезным: Как я могу использовать разные CSS при печати или предварительном просмотре?

Попробуйте добавить следующеев ваш HTML-документ: 

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

И добавление вашего UL CSS в отдельную таблицу стилей с именем print.css.

...