Warum passen meine Divs den Standort nicht automatisch an?

Question

Mit JQuery,
Ich habe eine Reihe von vier Reiter, die wie folgt beginnen:

<ul class="tabs"> 
    <li> 
     <input type="radio" name="tabs" id="tab1" checked /> 
     <label for="tab1">Item One</label> 
     <div id="tab-content1" class="tab-content"> 
      <p>Text Here </p> 
     </div> 
    </li> 
</ul> 

Auf einem Desktop es wie gewünscht aussieht. Aber auf Mobilgeräten, wenn der Bildschirm geschrumpft ist, kollabieren die anderen Tabs unter (was sie eigentlich sollen), aber der Text innerhalb des Divs passt sich nicht automatisch an. Dadurch bleiben die anderen Registerkarten hinter dem sichtbaren Text.

Gibt es eine Möglichkeit, das zu beheben?

Danke,

Für den ganzen Code, um diese JSFiddle Seite: https://jsfiddle.net/hesbwgsm/2/

Answer 1

bacause .tabs li in Ihrem CSS, .tabswidth: 75% aber li, die innerhalb von ul Sie es keine Breite geben

ersetzen Sie diese durch Ihre

.tabs li { 
    float: left; 
    display: block; 
    width: 25%; 
}