Using only CSS @media print, how do I cause an html unordered list to span multiple columns?

Question

For the browser I use the code below to break my unordered list into three columns. It works great.

Here is the list in 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;
        }

How can I do the same when its going to be printed? I tried it like this;

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

But it doesn't work? The UL remains a single long column. I don't see an answer for this question here on StackOverflow.

Your CSS works for me in Chrome, Firefox, Edge and IE, when I use it like this: https://codepen.io/arthurattwell/pen/arvJOE. Note that `column-count` is widely supported so the vendor prefixes may not be necessary, and that `-webkit-column-count: 4;` is therefore overriden by `column-count: 2`. If you add more of your code we may be able to help further. — Arthur, May 08 '19 at 12:28
I've added the list it supposed to work on to my original question. I've also created a separate print.css and moved the above @media css to it, plus of course adding the link in the help.php document (its name). I also tried this in Chrome, Firefox, and Safari with no joy. It only seems to work on the web page itself not in print mode. Thoughts? — Keith D Kaiser, May 08 '19 at 15:25

score 0 · Answer 1 · answered May 08 '19 at 11:03

Though the question asked here is different, the top answer in this post may prove helpful: How can I have different CSS when I print or print preview?

Try adding the following to your HTML document:

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

And adding your UL css into a seperate stylesheet called print.css.

Using only CSS @media print, how do I cause an html unordered list to span multiple columns?

1 Answers1