WEB広告運用の困りごとが集まる場所 コミュニティ コミュニティ ラジオボタンの縦幅を揃え、SPでのボタン表示のずれを直したい 返信先:ラジオボタンの縦幅を揃え、SPでのボタン表示のずれを直したい

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

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

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