Radio Button's new align

Pat Zalando · 10. Dezember 2020

Abend,

ich stehe gerade vollkommen auf dem Schlauch.

Code

    <div class="settingsPart">
        <div class="orbRowDiv">
            <p class="textboxText">T1</p>
            <input type="radio" class="orbSelecterRadio" id="orbst1_1" name="orbst1" value="B" checked="">
            <input type="radio" class="orbSelecterRadio" id="orbst1_2" name="orbst1" value="R">
            <input type="radio" class="orbSelecterRadio" id="orbst1_3" name="orbst1" value="N">
            <input type="radio" class="orbSelecterRadio" id="orbst1_4" name="orbst1" value="S">
        </div>
        <div class="orbRowDiv">
            <p class="textboxText">T2</p>
            <input type="radio" class="orbSelecterRadio" id="orbst2_1" name="orbst2" value="B" checked="">
            <input type="radio" class="orbSelecterRadio" id="orbst2_2" name="orbst2" value="R">
            <input type="radio" class="orbSelecterRadio" id="orbst2_3" name="orbst2" value="N">
            <input type="radio" class="orbSelecterRadio" id="orbst2_4" name="orbst2" value="S">
        </div>
        <div class="orbRowDiv">
            <p class="textboxText">T3</p>
            <input type="radio" class="orbSelecterRadio" id="orbst3_1" name="orbst3" value="B" checked="">
            <input type="radio" class="orbSelecterRadio" id="orbst3_2" name="orbst3" value="R">
            <input type="radio" class="orbSelecterRadio" id="orbst3_3" name="orbst3" value="N">
            <input type="radio" class="orbSelecterRadio" id="orbst3_4" name="orbst3" value="S">
        </div>
        <div class="orbRowDiv">
            <p class="textboxText">T4</p>
            <input type="radio" class="orbSelecterRadio" id="orbst4_1" name="orbst4" value="B" checked="">
            <input type="radio" class="orbSelecterRadio" id="orbst4_2" name="orbst4" value="R">
            <input type="radio" class="orbSelecterRadio" id="orbst4_3" name="orbst4" value="N">
            <input type="radio" class="orbSelecterRadio" id="orbst4_4" name="orbst4" value="S">
        </div>
             
    </div>

Alles anzeigen

Ich möchte das die Anreihung dem wie auf dem Bild entspricht:

https://gyazo.com/3c53a3c2e7c301082424966c338e3f9c

Bei mir sieht der Spaß derweil so aus:

https://gyazo.com/07b69328bde0476d943a2dccfa1b315f

Der CSS Code ist es nicht Wert

basti1012 · 10. Dezember 2020

Teste das mal

Code

.settingsPart{
  display:flex;
}
.orbRowDiv{
  display:flex;
  flex-direction:column;
}

Pat Zalando · 10. Dezember 2020

Perfekt! Kann man den Abstand zwischen T1-4 und den Radio's auch bearbeiten im orbRowDiv bearbeiten? Sieht aus als hätte ich ein Zeilenumbruch drin.

basti1012 · 10. Dezember 2020

klar mit Padding und margin.

Einfach mal testen wie du es haben willst

Radio Button's new align

Jetzt mitmachen!

Teilen