Mikhail Neofitov Mikhail Neofitov - 6 months ago 10
HTML Question

Is there a way to display div after li only with css?

I have the following tabs structure:

<ul>
<li id="first">First header</li>
<li id="second">Second header</li>
<li id="third">Third header</li>
<li id="fourth">Fourth header</li>
</ul>
<div id="first_div">First content (related to first li)</div>
<div id="second_div">Second content (related to second li)</div>
<div id="third_div">Third content (related to third li)</div>
<div id="fourth_div">Fourth content (related to fourth li)</div>


On web view it displays correctly (with some simple script: displaying a div depending on selected li).

But on the print view this should be displayed in the following structure:

First header
First content

Second header
Second content


If I add
display: block
on the whole structure it apparently firstly displays
li
s, then
div
s.

Is there a way to form required view only with css?

Answer

No, without duplicating content its not possible. However you can achieve this as follows:

HTML:

<ul class="headers-list">
    <li class="first">First header</li>
    <li class="second">Second header</li>
    <li class="third">Third header</li>
    <li class="fourth">Fourth header</li>
</ul>

<div class="first print-header">First header</div>
<div id="first_div">First content (related to first li)</div>

<div class="second print-header">Second header</div>
<div id="second_div">Second content (related to second li)</div>

<div class="third print-header">Third header</div>
<div id="third_div">Third content (related to third li)</div>

<div class="fourth print-header">Fourth header</div>
<div id="fourth_div">Fourth content (related to fourth li)</div>

CSS:

.print-header {
    display: none;
}

@media print {
    .headers-list {
        display: none;
    }
    .print-header {
        display: block;
    }
}