ラジオボタンの改行を防ぐ方法は？

Question

私が作成しているフォームでは、トグルスイッチとしてラジオボタンを表示するためにCSSを使用しました。

しかし、それはまったく反応しません。モバイルで見ると、「スケール」1-5は分割して表示されます。私の目標は、それが壊れるのではなく、それに応じてスケールを変更することです。

何とか私はそれを理解できないようです。事前にhttp://jsfiddle.net/7byse1vk/

.toggle__label { 
transition: all .25s ease; 
display: inline-block; 
border-radius: 5px; 
background-color: #878787; 
cursor: pointer; 
padding: 0 30px; 
min-width: 100px; 
height: 48px; 
line-height: 48px; 
color: #a7a6ae; 
text-align: center; 
} 

感謝：

は、ここでは、コードです！

Answer 1

あなたは、そう、彼らは流動的親を埋める（そうでないものがそれらに少なくとも160ピクセルのモバイル用広すぎ、各ワイドになります）、およびflex-grow: 1にそれらを設定し、ラベルからmin-widthを削除し、親にdisplay: flex;を使用することができます。

body { 
 
    padding: 20px; 
 
} 
 

 
.toggle { 
 
    margin-bottom: 20px; 
 
} 
 

 
.row { 
 
    display: flex; 
 
} 
 

 
.toggle__label { 
 
    transition: all .25s ease; 
 
    border-radius: 5px; 
 
    background-color: #878787; 
 
    cursor: pointer; 
 
    padding: 0 30px; 
 
    height: 48px; 
 
    line-height: 48px; 
 
    color: #a7a6ae; 
 
    text-align: center; 
 
    flex-grow: 1; 
 
} 
 

 
.toggle__input:checked + .toggle__label { 
 
    background-color: #e5702a; 
 
    color: white; 
 
} 
 

 
.toggle__label--left { 
 
    border-top-right-radius: 0; 
 
    border-bottom-right-radius: 0; 
 
} 
 

 
.toggle__label--middle { 
 
    border-top-right-radius: 0; 
 
    border-bottom-right-radius: 0; 
 
    margin-left: -4px; 
 
    border-top-left-radius: 0; 
 
    border-bottom-left-radius: 0; 
 
} 
 

 
.toggle__label--right { 
 
    margin-left: -4px; 
 
    border-top-left-radius: 0; 
 
    border-bottom-left-radius: 0; 
 
} 
 

 
.toggle__input { 
 
    position: absolute; 
 
    left: -99999px; 
 
} 
 

 
label { 
 
    padding: 0.4em 2em 0.4em 0; 
 
} 
 

 
.toggle-btn-grp { 
 
    margin: 3px 0; 
 
} 
 

 
.toggle-btn { 
 
    text-align: centre; 
 
    margin: 5px 2px; 
 
    padding: 0.4em 3em; 
 
    color: #000; 
 
    background-color: #FFF; 
 
    border-radius: 10px; 
 
    display: inline-block; 
 
    border: solid 1px #CCC; 
 
    cursor: pointer; 
 
} 
 

 
.toggle-btn-grp.joint-toggle .toggle-btn { 
 
    margin: 5px 0; 
 
    padding: 0.4em 2em; 
 
    border-radius: 0; 
 
    border-right-color: white; 
 
} 
 

 
.toggle-btn-grp.joint-toggle .toggle-btn:first-child { 
 
    margin-left: 2px; 
 
    border-radius: 10px 0px 0px 10px; 
 
} 
 

 
.toggle-btn-grp.joint-toggle .toggle-btn:last-child { 
 
    margin-right: 2px; 
 
    border-radius: 0px 10px 10px 0px; 
 
    border-right: solid 1px #CCC; 
 
} 
 

 
.toggle-btn:hover { 
 
    border: solid 1px #a0d5dc !important; 
 
    background: #f1fdfe; 
 
} 
 

 
.toggle-btn.success { 
 
    background: lightgreen; 
 
    border: solid 1px green !important; 
 
} 
 

 
.visuallyhidden { 
 
    border: 0; 
 
    clip: rect(0 0 0 0); 
 
    height: 1px; 
 
    margin: -1px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    position: absolute; 
 
    width: 1px; 
 
} 
 

 
.visuallyhidden.focusable:active, 
 
.visuallyhidden.focusable:focus { 
 
    clip: auto; 
 
    height: auto; 
 
    margin: 0; 
 
    overflow: visible; 
 
    position: static; 
 
    width: auto; 
 
} 
 

 

 
/* CSS only version */ 
 

 
.toggle-btn-grp.cssonly * { 
 
    width: 140px; 
 
    height: 30px; 
 
    line-height: 30px; 
 
} 
 

 
.toggle-btn-grp.cssonly div { 
 
    display: inline-block; 
 
    position: relative; 
 
    margin: 5px 2px; 
 
} 
 

 
.toggle-btn-grp.cssonly div label { 
 
    position: absolute; 
 
    z-index: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 

 
.toggle-btn-grp.cssonly div input { 
 
    position: absolute; 
 
    z-index: 1; 
 
    cursor: pointer; 
 
    opacity: 0; 
 
} 
 

 
.toggle-btn-grp.cssonly div:hover label { 
 
    border: solid 1px #a0d5dc !important; 
 
    background: #f1fdfe; 
 
} 
 

 
.toggle-btn-grp.cssonly div input:checked + label { 
 
    background: lightgreen; 
 
    border: solid 1px green !important; 
 
}

<div class="row"> 
 
    <input class="toggle__input" id="option-1" type="radio" name="input4" value="1"> 
 
    <label class="toggle__label toggle__label--left" for="option-1">1</label> 
 

 
    <input checked="true" class="toggle__input" id="option-2" type="radio" name="input4" value="2"> 
 
    <label class="toggle__label toggle__label--middle" for="option-2">2</label> 
 

 
    <input class="toggle__input" id="option-3" type="radio" name="input4" value="3"> 
 
    <label class="toggle__label toggle__label--middle" for="option-3">3</label> 
 

 
    <input class="toggle__input" id="option-4" type="radio" name="input4" value="4"> 
 
    <label class="toggle__label toggle__label--middle" for="option-4">4</label> 
 

 
    <input class="toggle__input" id="option-5" type="radio" name="input4" value="5"> 
 
    <label class="toggle__label toggle__label--right" for="option-5">5</label> 
 
</div>

Answer 2

以下のラベルのためのあなたのCSSを交換し、それがうまくいきます。これにより、適切にスケールされます。現時点では、最小設定幅を持っており、box-sizing: border-box;がないため、paddingで伸縮しているためです。

.toggle__label { 
    transition: all .25s ease; 
    display: inline-block; 
    border-radius: 5px; 
    background-color: #878787; 
    cursor: pointer; 
    padding: 0 30px; 
    width: 20%; 
    height: 48px; 
    line-height: 48px; 
    color: #a7a6ae; 
    text-align: center; 
    float: left; 
    box-sizing: border-box; 
}