ラジオボタンの整列問題

Question

カスタムラジオボタンを一列に整列しようとしていますが、問題が発生しています。テキストが実際に長いが、ラジオボタンが重なっている場合。私はそれらのいずれかに修正幅を割り当てたいとは思わない。また、エラー処理のためにラジオボタンの境界線を変更したい場合は、.radio .customスタイリングが必要です。私はhtml構造を変更するために開いていますが、customスパンの内側にTextが必要です。私は必要に応じて内側のスパンを取り除くことができます。

display:flex; 

labelに、それは私に右のお互いの上に、各オプションを与えてしまった：

私が使って試してみました。

* { 
 
    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

これを実行する1つの方法があります。あなたのHTMLを少し簡略化しました（余分に入れ子になったspanを削除）、次のCSSを使用しました。

カスタムボタンは18px四角であるため、子要素span.customの25ピクセルの余白を許可しました。

これにより、.customの左に表示される:before疑似要素のスペースが確保されます。

labelの背景に色を付けて、チェックされていないボタンが見えるようにしましたが、そうでない場合は、マークアップによって境界線や間隔などを制御できます。

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

それを中心にしながら、私は、親のdivのすべてを包み、それフレキシボックスました。私のために働くと思われる。

<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>