Setzen Sie die Breite auf 100 Prozent des Texts plus Auffüllen

Question

Ich habe Probleme, den Code unten korrekt zu formatieren. Was ich brauche ist, dass die Etiketten 100% Breite des Texts haben (kein Wortumbruch) plus eine feste Polsterung auf der linken und rechten Seite. Ich kann eine manuelle Breite mit Pixeln einstellen, aber dann haben alle Knöpfe genau die gleiche Breite, was ich nicht will. Ich habe nach der Antwort gesucht und bin leer ausgegangen. Alle Lösungen, die ich versuchte, funktionierten nicht für mich. Hier

ist ein codepen: https://codepen.io/anon/pen/KzYEbv

HTML:

<div id="toolbar-upper"> 
<div class="sort-by-container"> 
    <span>SORT BY </span> 
    <ul class="sort-by-radios"> 
    <li> 
     <input type="radio" id="newest" name="sortby" value="" onchange="setLocation(this.value)"> 
     <label for="newest">Newest Arrivals</label> 
    </li> 
    <li> 
     <input type="radio" id="name" name="sortby" value="" onchange="setLocation(this.value)"> 
     <label for="name">Name</label> 
    </li> 
    <li> 
     <input type="radio" id="price-high" name="sortby" value="" checked="checked" onchange="setLocation(this.value)"> 
     <label for="price-high">Price (High)</label> 
    </li> 
    <li> 
     <input type="radio" id="price-low" name="sortby" value="" checked="checked" onchange="setLocation(this.value)"> 
     <label for="price-low">Price (Low)</label> 
    </li> 
    </ul> 
</div> 
</div> 

CSS:

#toolbar-upper .sort-by-radios { 
    list-style-type: none; 
    margin: 0; 
    margin-left: 20px; 
    vertical-align: middle; 
    display: inline-block; 
    padding: 0; 
} 

#toolbar-upper .sort-by-radios li { 
    float: left; 
    margin: 0 15px 0 0; 
    height: 30px; 
    position: relative; 
    width: 130px; 
} 

#toolbar-upper .sort-by-radios label, #toolbar-upper .sort-by-radios input { 
    display: block; 
    position: absolute; 
    top: 0; 
    left:0; 
    right:0; 
    bottom:0; 
} 

#toolbar-upper .sort-by-radios input[type="radio"] { 
    opacity: 0.01; 
    z-index: 100; 
} 

#toolbar-upper .sort-by-radios input[type="radio"]:checked + label { 
    background: #3c8dc5; 
    color: white; 
} 

#toolbar-upper .sort-by-radios label { 
    padding: 0 30px 0 30px; 
    border: 1px solid #4C4C4C; 
    cursor: pointer; 
    display: inline-block; 
    z-index: 90; 
    font-weight: 600; 
    text-align: center; 
} 

#toolbar-upper .sort-by-radios label:hover { 
    background:#3c8dc5; 
    color: white; 
} 

#toolbar-upper .sort-by-container span { 
    font-size: 1rem; 
    display: inline-block; 
    vertical-align: middle; 
    font-weight: 600; 
} 

Answer 1

https://codepen.io/anon/pen/JXVzVx

Hier ist, was Sie brauchen. Das Problem war position:absolute; auf den Etiketten. Ich entfernte es und fügte white-space:nowrap; dem Beschriftungstext hinzu und änderte das Padding ein wenig.

Wenn Sie position:absolute; auf den Rest der Elemente zu erhalten: https://codepen.io/anon/pen/NNmJQj

Protip: Sie padding: 5px 30px; gehen können und es bedeutet dasselbe wie padding:5px 30px 5px 30px;