ラジオボタンを横並びで綺麗な見た目にしたい

前提

顧客向けアンケートを作成しており、その中の項目にNPS(11段階評価)の項目を作成したい。

実現したいこと

レスポンシブでラジオボックスを横並びに表示させる。

発生している問題・エラーメッセージ

PC、タブレットでは綺麗に表示されるが、スマホで表示すると「10」が縦になってしまう。
スマホでも10を横並びに表示したい。

CSS

float:leftを指定したり、横幅を指定したりしても改善せず。

.radio-button-group {
  display: flex;
}
.radio-button-group .item {
  width: 100%;
  justify-content: space-evenly;
}
.radio-button-group .radio-button {
  position: absolute;
  width: fit-content;
  height: 1px;
  opacity: 0;
}
.radio-button-group .radio-button + label {
    padding: 16px 10px;
    cursor: pointer;
    border: 1px solid #CCC;
    margin-right: -2px;
    color: #555;
    background-color: #ffffff;
    display: block;
    text-align: center;
}
.radio-button-group .item:first-of-type .radio-button + label{
  border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.radio-button-group .item:last-of-type .radio-button + label {
  border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.radio-button-group .radio-button:checked + label {
    background-color: #FF367F;
    color: #FFF;
}

HTML

 <div class="radio-button-group mts">
        <div class="item">
          <input type="radio" name="button-group" class="radio-button" value="0" id="button0" checked />
          <label for="button0">0</label>
        </div>
        <div class="item">
          <input type="radio" name="button-group" class="radio-button" value="1" id="button1" checked />
          <label for="button1">1</label>
        </div>
        <div class="item">
          <input type="radio" name="button-group" class="radio-button" value="2" id="button2" />
          <label for="button2">2</label>
        </div>
        <div class="item">
          <input type="radio" name="button-group" class="radio-button" value="3" id="button3" />
          <label for="button3">3</label>
        </div>
        <div class="item">
          <input type="radio" name="button-group" class="radio-button" value="4" id="button4" />
          <label for="button4">4</label>
        </div>
        <div class="item">
          <input type="radio" name="button-group" class="radio-button" value="5" id="button5" />
          <label for="button5">5</label>
        </div>
        <div class="item">
          <input type="radio" name="button-group" class="radio-button" value="6" id="button6" />
          <label for="button6">6</label>
        </div>
        <div class="item">
          <input type="radio" name="button-group" class="radio-button" value="7" id="button7" />
          <label for="button7">7</label>
        </div>
        <div class="item">
          <input type="radio" name="button-group" class="radio-button" value="8" id="button8" />
          <label for="button8">8</label>
        </div>
        <div class="item">
          <input type="radio" name="button-group" class="radio-button" value="9" id="button9" />
          <label for="button9">9</label>
        </div>
        <div class="item">
          <input type="radio" name="button-group" class="radio-button" value="10" id="button10" />
          <label for="button10">10</label>
        </div>
      </div>

yambejp

2022/12/22 02:19 編集

ソースを提示できませんか？そのまま10が横並びになるとBOXの幅が10だけ幅広になってもいいんでしょうか？

ttrinkk

2022/12/22 02:19

10のみ幅広になって問題ないです。

行動規範の内容に同意します

回答1件

ベストアンサー

label要素の左右余白を10px取っているので、要素幅がテキスト幅+20pxより小さくなるとはみ出るので折り返さるのが原因です。
左右余白を0にすればいいでしょう。

diff
1.radio-button-group .radio-button + label {
2-    padding: 16px 10px;
3+   padding: 16px 0;
4    cursor: pointer;
5    border: 1px solid #CCC;
6    margin-right: -2px;
7    color: #555;
8    background-color: #ffffff;
9    display: block;
10    text-align: center;
11}