Symbol bleibt an der gleichen Position, unabhängig von der Bildschirmgröße

Question

Einige Hintergrundinformationen zu meiner Anfrage. Derzeit habe ich einen Tabbed-Inhalt, der den Inhalt basierend auf der Benutzerauswahl mithilfe der Liste umschaltet. Ich möchte ein kleines Symbol anzeigen, eine Zahl mit einem Kreis in der Liste. Darüber hinaus hat jede Liste ihr eigenes Hintergrundbild. Aber ich erkenne, dass, wenn ich meine Bildschirmgröße ändern, um zum Beispiel ipad zu nehmen, das Symbol nicht als das ausrichten wird, was ich vorher auf iPhone 4 Bildschirmgröße gesehen habe.

Ich möchte sehen, ob jemand dazu beraten könnte.

Unten ist mein Code.

Stil

  <style> 
       @media (max-width: 1024px) 
       { 
        html 
        { 
         font-size: 14px; 
        } 
       } 

       @media (max-width: 320px) 
       { 
        html 
        { 
         font-size: 8px; 
        } 
       } 
       #tab1, #tab2 
       { 
        display: none; 
       } 

       .main 
       { 
        margin: 0 auto; 
        min-width: 100%; 
        max-width: 100%; 
        background: color(alabaster); 
        position: relative; 
        top: 25%; 
        z-index: 10; 

       } 

       .pill-btn-no-item1 
       { 
        position: absolute; 
        left: 15.8rem; 
        z-index: 11; 
        background-color: green; 
        width: 2.8rem; 
        height: 2.8rem; 
        padding: 0.3rem; 
        font-weight: bold; 
        font-size: 1.5rem; 
        color: #fff; 
        text-align: center; 
        border-radius: 50%; 
       } 

       .pill-btn-no-item2 
       { 
        position: absolute; 
        right: 3.8rem; 
        z-index: 11; 
        background-color: green; 
        width: 2.8rem; 
        height: 2.8rem; 
        padding: 0.3rem; 
        font-weight: bold; 
        font-size: 1.5rem; 
        color: #fff; 
        text-align: center; 
        border-radius: 50%; 
       } 
       .contentpanel 
       { 
        background: color(alabaster); 
        color: color(dove-gray); 
        padding: 5rem 0 0; 
       } 

       .contentpanel > div 
       { 
        display: none; 
        padding: 0rem 0rem 0.5rem; 
       } 
       .radio 
       { 
        display: none; 
       } 
       .overall-nav 
       { 
        padding: 0 2rem; 
        height: 5.8rem; 
        position: absolute; 
        width: 100%; 
        margin-top:-2.5rem; 
       } 
       nav 
       { 
        background: color(white); 
        border-radius: 5rem; 
        height: 5.8rem; 
        margin: 0; 
        padding: 0; 
        box-sizing: border-box; 
        -webkit-box-shadow: rgba(153,153,153,0.5) 0 0.5rem 0.8rem 0.1rem; 
        -moz-box-shadow: rgba(153,153,153,0.5) 0 0.5 0.8 0.1; 
        box-shadow: 0 0.5rem 0.8rem 0.1rem rgba(153,153,153,0.5); 
       } 

       nav ul 
       { 
        float:left; 
        width:100%; 
        height: 5.8rem; 
        padding: 0; 
        margin: 0; 
       } 
       .clear 
       { 
        clear:both; 
       } 
       nav li 
       { 
        float: left; 
        width: 50%; 
        border-radius: 5rem; 
        list-style: none; 
        height: 5.8rem; 
       } 

       nav ul li label 
       { 

        padding: 2rem 1rem; 
        text-align: center; 
        display: block; 
        font-weight: bold; 


       } 
       .wording 
       { 
         margin-top:4.5rem; 
        font-size: 1rem; 
       } 

       nav li:hover 
       { 
        color: #B9B5C7; 
        cursor: pointer; 
       } 

       #tab1:not(:checked) ~ .overall-nav nav .tab1 
       { 
        background: white url('scheduledfund-unfocus.png'); 
        background-repeat: no-repeat; 
        background-position: center center; 
        background-size: 5rem 3.2rem; 
        color: color(dusty-gray); 
       } 

       #tab1:checked ~ .overall-nav nav .tab1 
       { 
        background: red url('scheduledfund.png'); 
        background-repeat: no-repeat; 
        background-position: center center; 
        background-size: 5rem 3.2rem; 
        color: color(congress-blue); 

       } 

       #tab2:not(:checked) ~ .overall-nav nav .tab2 
       { 
        background: white url('adhocfund-unfocus.png'); 
        background-repeat: no-repeat; 
        background-position: center center; 
        background-size: 5rem 3.2rem; 
        color: color(dusty-gray); 
       } 

       #tab2:checked ~ .overall-nav nav .tab2 
       { 
        background: red url('adhocfund.png'); 
        background-repeat: no-repeat; 
        background-position: center center; 
        background-size: 5rem 3.2rem; 
        color: color(congress-blue); 
       } 

       #tab1:checked ~ .contentpanel .tab1, 
       #tab2:checked ~ .contentpanel .tab2 
       { 
        display: block; 
       } 



      </style> 

** Hauptcode **

  <html> 
      <head> 
       <meta charset="utf-8"> 
       <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
       <meta name="viewport" content="width=device-width, initial-scale=1"> 
      </head> 
      <div class="main"> 
       <input id="tab1" class="radio" type="radio" name="tabs" checked="checked"> 
       <input id="tab2" class="radio" type="radio" name="tabs"> 

       <div class="overall-nav"> 
        <nav> 
         <ul> 
          <li for="tab1" class="tab1"> 
            <label for="tab1"><span class="pill-btn-no-item1">2</span></label> 
          </li> 
          <li class="tab2"> 
            <label for="tab2"><span class="pill-btn-no-item2">3</span></label> 
          </li> 
         </ul> 
         <div class="clear"></div> 
        </nav> 
       </div> 
       <div class="contentpanel"> 
        <div class="tab1"> 
         Content 1 
        </div> 
        <div class="tab2"> 
         Content 2 
        </div> 
       </div> 
      </div> 
      </html> 

Answer 1

Sie benötigen Position hinzufügen zu beschriften

nav ul li label {position: relative;} 
.pill-btn-no-item1, .pill-btn-no-item2 {left: auto; right: 20px;} 

Answer 2

Sie möchten vielleicht DIV GRID versuchen, es bleiben wie auch immer zu welcher Auflösung.