| Squad voice

widgetマスター

モデレータ

2023年9月8日 16:34

下記CSSの設定を行った上、HTML側の方にも調整が必要になります。

■ CSS の調整

.select-list>li label {
    position: relative;
    /* ↓ 以下追加 */
    display: flex; 
}
.select-list>li .select-radio {
    display: flex; /* ← block を flex に修正 */
    width: 100%;
    padding: 20px 20px 20px 50px;
    background-color: #EBEBEB;
    border: 1px solid #cccccc;
    border-radius: 10px;
    box-sizing: border-box;
    transition: background-color 0.1s, color 0.1s;
    /* ↓ 以下追加 */
    height: 125px; /* ← こちらの数値をお好みで調整して下さい */
    align-items: center;
}

■ HTMLの調整

HTML側の方は、テキストを上下中央配置にするために、

下記のように <span class=”select-radio”> … </div> 内のテキストを

任意のタグで囲う必要がございます。

例えば、Q2の場合は下記のように <p>…</p> で囲います

。※テキスト部分（〇〇〇〇〇〇）のみを抜粋しております。

[ 修正前 ]

<span class="select-radio">
    〇〇〇〇〇〇<br>〇〇〇〇〇〇
</span>
<span class="select-radio">
    〇〇〇〇〇〇<br>〇〇〇〇〇〇
</span>
<span class="select-radio">
〇〇〇〇〇〇
</span>
<span class="select-radio">
    〇〇〇〇〇〇

</span>

[ 修正後 ]

<span class="select-radio">
    <p>〇〇〇〇〇〇、<br>〇〇〇〇〇〇</p>
</span>
<span class="select-radio">
    <p>〇〇〇〇〇〇<br>〇〇〇〇〇〇</p>
</span>
<span class="select-radio">
    <p>〇〇〇〇〇〇、〇〇〇〇〇〇</p>
</span>
<span class="select-radio">
    <p>〇〇〇〇〇〇</p>
</span>

少々、ご説明が分かりづらいかもしれませんので、

ご不明点などございましたらコメント欄にてご質問くださいませ。