Ausrichten Radio-Tasten CSS-Problem

Question

Ich versuche, meine benutzerdefinierten Radio-Tasten in einer Linie auszurichten, aber ich habe ein Problem. Wenn der Text wirklich lang ist, aber Radio-Button sich gegenseitig überlappen. Ich möchte keinem von ihnen eine feste Breite zuweisen. Außerdem muss ich .radio .custom Styling dort haben, wenn ich den Rand der Radio-Taste für die Fehlerbehandlung ändern möchte. Ich bin offen für die Änderung der HTML-Struktur, aber ich brauche den Text innerhalb custom span. Ich kann die innere Spannweite bei Bedarf loswerden.

Ich habe versucht mit:

display:flex; 

auf label

aber es endet mir jede Option rechts übereinander geben.

* { 
 
    box-sizing: border-box; 
 
} 
 
input[type="radio"] { 
 
    display: none; 
 
    cursor: pointer; 
 
} 
 
label { 
 
    cursor: pointer; 
 
    min-width: 50px; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.radio span.custom > span { 
 
    margin-left: 24px; 
 
    margin-right: 10px; 
 
} 
 
.radio .custom { 
 
    content: ''; 
 
    height: 20px; 
 
    left: 0; 
 
    top: 0; 
 
    width: 20px; 
 
    background-color: #fff; 
 
    border: 1px solid #ccc; 
 
    border-radius: 100%; 
 
    position: absolute; 
 
} 
 
.radio input:checked + .custom:before { 
 
    background-color: blue; 
 
    border-radius: 100%; 
 
    border: 3px solid #fff; 
 
    content: ""; 
 
    display: block; 
 
    height: 12px; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 12px; 
 
    z-index: 1; 
 
    left: 0; 
 
} 
 
.radio input + .custom:after { 
 
    border-radius: 100%; 
 
} 
 
.checkbox input:checked .custom { 
 
    background-color: blue; 
 
    border-color: blue; 
 
}

<label class="radio"> 
 
    <input type="radio"> 
 
    <span class="custom"><span>Onasasasase</span></span> 
 
</label> 
 
<label class="radio"> 
 
    <input type="radio"> 
 
    <span class="custom"><span>Two</span></span> 
 
</label>

JSFiddle Demo

Answer 1

Hier ist eine Möglichkeit, es zu tun. Ich habe Ihren HTML-Code leicht vereinfacht (extra verschachtelt span entfernt) und das folgende CSS verwendet.

Ihre benutzerdefinierte Schaltfläche ist 18px Quadrat, so dass ich einen 25px Rand auf dem untergeordneten Element span.custom erlaubt.

Dies ermöglicht Platz für das :before Pseudo-Element, das auf der linken Seite von .custom erscheint.

Ich habe den Hintergrund auf der label gefärbt, so dass Sie die ungeprüfte Schaltfläche sehen können, aber sonst können Sie Mark-up gibt Ihnen eine Menge Kontrolle über die Grenzen, Abstand und so weiter.

input[type="radio"] { 
 
    cursor: pointer; 
 
    display: none; 
 
} 
 

 
label { 
 
    cursor: pointer; 
 
    min-width: 50px; 
 
    display:inline-block; 
 
    position:relative; 
 
    background-color: #F0F0F0; // for demo only 
 
} 
 

 
.radio .custom { 
 
    margin-left: 25px; 
 
    margin-right: 25px; 
 
} 
 

 
.radio input + .custom:before { 
 
    content: ""; 
 
    background-color: #fff; 
 
    border-radius: 100%; 
 
    border: 3px solid #fff; 
 
    display: block; 
 
    height: 12px; 
 
    width: 12px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.radio input:checked + .custom:before { 
 
    background-color: blue; 
 
    border: 3px solid #fff; 
 
}

<label class="radio"> 
 
    <input type="radio"> 
 
    <span class="custom">One is very long</span> 
 
</label> 
 

 
<label class="radio"> 
 
    <input type="radio"> 
 
    <span class="custom">Two</span> 
 
</label>

Answer 2

ich es einfach alles in einem übergeordneten div gewickelt und machte eine Flexbox, während es zentriert. Scheint für mich zu arbeiten.

<div style="display: flex; justify-content: space-around"> 
    <label class="radio"> 
    <input type="radio"> 
    <span class="custom"><span>Onasasasase</span></span> 
    </label> 
    <label class="radio"> 
    <input type="radio"> 
    <span class="custom"><span>Two</span></span> 
    </label> 
</div>