如何防止單選按鈕斷線？

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

您可以在父用display: flex;，請從標籤min-width（否則，這將讓他們至少160像素寬各，太寬了，手機），並將它們設置爲flex-grow: 1，使其充滿父流體。

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下面的標籤，它會工作。這將適當地縮小它們。這是因爲目前他們已經有了最小設置寬度，並且正在與padding拉伸，因爲他們沒有box-sizing: border-box;。

.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; 
}