Verwenden Sie den gleichen Code für Desktop-Tabs und mobile Akkordeon - nur CSS

Question

Auf kleine Auflösung (Handys) muss ich Registerkarten in Akkordeons verwandeln. Dies ist aktuell HTML:

<main> 
    <input id="tab1" type="radio" name="tabs" checked> 
    <label for="tab1">Tab 1</label> 
    <section id="content1">Tab 1 Content</section> 

    <input id="tab2" type="radio" name="tabs"> 
    <label for="tab2">Tab 2</label> 
    <section id="content2">Tab 2 Content</section> 

    <input id="tab3" type="radio" name="tabs"> 
    <label for="tab3">Tab 3</label> 
    <section id="content3">Tab 3 Content</section> 
</main> 

und die CSS:

main { 
    padding: 50px 0 0 0; 
    margin: 0 auto; 
    background: #fff; 
} 
section { 
    display: none; 
    padding: 20px 0 0; 
    border-top: 1px solid #ddd; 
} 
input { 
    display: none; 
} 
label { 
    display: inline-block; 
    margin: 0 0 -1px; 
    padding: 15px 25px; 
    font-weight: 600; 
    text-align: center; 
    color: #bbb; 
    border: 1px solid transparent; 
} 
input:checked + label { 
    color: #555; 
    border: 1px solid #ddd; 
    border-top: 2px solid orange; 
    border-bottom: 1px solid #fff; 
} 
#tab1:checked ~ #content1, 
#tab2:checked ~ #content2, 
#tab3:checked ~ #content3 { 
    display: block; 
} 
@media screen and (max-width: 650px) { 
    main { 
    padding-top:0; 
    } 
    label { 
    /*font-size: 0;*/ 
    text-align:left; 
    display:block; 
    } 
    label:before { 
    margin: 0; 
    font-size: 18px; 
    } 
} 

Dies funktioniert auf Handys (wie Akkordeon), aber labels auf Desktop-Auflösung gebrochen.

Irgendeine Idee, wie ich Etiketten horizontal oben befestigen kann? Außerdem muss die Tabellenzelle angezeigt werden. Hier

Fiddle here

Answer 1

ist die Lösung Ihrer Frage.

main { 
 
    padding: 50px; 
 
    margin: 0 auto; 
 
    background: #fff; 
 
} 
 
.tabArea { 
 
    border-bottom: 1px solid #ccc; 
 
} 
 
section { 
 
    display: none; 
 
    padding: 20px 0 0; 
 
    position: absolute 
 
} 
 
input { 
 
    display: none; 
 
} 
 
label { 
 
    display: inline-block; 
 
    margin: 0 0 -1px; 
 
    padding: 15px 25px; 
 
    font-weight: 600; 
 
    text-align: center; 
 
    color: #bbb; 
 
    border: 1px solid transparent; 
 
} 
 
label:hover { 
 
    color: #888; 
 
    cursor: pointer; 
 
} 
 
input:checked + label { 
 
    color: #555; 
 
    border: 1px solid #ddd; 
 
    border-top: 2px solid orange; 
 
    border-bottom: 1px solid #fff; 
 
} 
 
#tab1:checked ~ #content1, 
 
#tab2:checked ~ #content2, 
 
#tab3:checked ~ #content3, 
 
#tab4:checked ~ #content4 { 
 
    display: block; 
 
} 
 
@media screen and (max-width: 650px) { 
 
    label { 
 
    /*font-size: 0;*/ 
 
    text-align: left; 
 
    display: block; 
 
    } 
 
    label:before { 
 
    margin: 0; 
 
    font-size: 18px; 
 
    } 
 
    section { 
 
    position: relative; 
 
    } 
 
    .tabArea { 
 
    border: none; 
 
    } 
 
} 
 
@media screen and (max-width: 400px) { 
 
    label { 
 
    padding: 15px; 
 
    } 
 
}

<main> 
 
    <div class="tabArea"> 
 

 

 
    <input id="tab1" type="radio" name="tabs" checked> 
 
    <label for="tab1">Tab 1</label> 
 
    <section id="content1">Tab 1 Content</section> 
 

 
    <input id="tab2" type="radio" name="tabs"> 
 
    <label for="tab2">Tab 2</label> 
 
    <section id="content2">Tab 2 Content</section> 
 

 
    <input id="tab3" type="radio" name="tabs"> 
 
    <label for="tab3">Tab 3</label> 
 
    <section id="content3">Tab 3 Content</section> 
 

 
    <input id="tab4" type="radio" name="tabs"> 
 
    <label for="tab4">Tab 4</label> 
 
    <section id="content4">Tab 4 Content</section> 
 
    </div> 
 
</main>