1

ボックスの中のラジオボタンが左に動かない。リストで囲ってみたりボックスのパディングをなくしても
動きません。コンタクトフォームの設定をみてみたのですが。
中央から動かない理由は見当たらず、、。他に何が考えられるでしょうか?

<!-- modal -->
    <div class="content">
      <a class="js-modal-open" href=""> 
        <i class="far fa-globe fa-3x sp-only"></i></a>
    </div>
    <div class="modal js-modal">
      <div class="modal__bg js-modal-close"></div>
      <div class="modal__content">
        <p>テキストは左による</p>

        <ul class="lang-list">
        <li class="lang-item">
          <input type="radio" name="language" value="英語" class="modal-radio" id="english">
          <label for="english">英語</label>
        </li>
        <li class="lang-item">
          <input type="radio" name="language" value="英語" class="modal-radio">
          <label for="english">英語</label>
        </li>
        <li class="lang-item">
          <input type="radio" name="language" value="英語" class="modal-radio">
          <label for="english">英語</label>
        </li>
        
      </ul>
        <a class="js-modal-close" href="">閉じる</a>
      </div><!--modal__inner-->
    </div><!--modal-->
/* モーダル */
.modal-radio{
  height: 30px;
}
.lang-list{
  width: 100%;
  text-align: left;
  font-size: 20px;
}
.lang-item{
  display: flex;
  justify-content: space-between;
  width: 100%;
}
  .content{
    margin: 0 auto;
    padding: 40px;
}
.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
}
.modal__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content{
    background: #fff;
    left: 50%;
    /* padding: 40px; */
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 60%;
    text-align: left;

}

コンタクトのcss
input {
  width: 100%;
  height:50px;
  border: 2px solid #aaa;
  border-radius: 4px;
  font-size: 1em;
  font-family: futura-pt, sans-serif;
  margin: 8px 0;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: 0.3s;
}

画像の説明をここに入力

画像の説明をここに入力

2
  • .lang-itemにdisplay: flexを付けているのが謎ですね。どういう結果を期待しているのかがよくわかりません。 2021年9月12日 5:06
  • コメントありがとうございます。ダイソーの画像のこんな風にしたいです。今はボックスの真ん中にラジオボタンがあって動かないです。 2021年9月12日 11:12

1 件の回答 1

1

それっぽくなるようCSSを修正してみました。
修正は全般に及んだので、どこをどう修正したのかは見比べてみてください。

.modaldisplay:none;設定は外さないと当然表示されず確認できないので、とりあえず外してあります。
他人にコードを見せるときはこういった点も配慮するようにしてください。

.lang-list{
  padding: 0;
}
.lang-item{
  list-style: none;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lang-item label {
  order: 1;
  font-size: 40px;
}
.lang-item input.modal-radio {
  order: 2;
  width: 30px;
  height: 30px;
}
.content{
margin: 0 auto;
padding: 40px;
}
.modal{
//display: none;
height: 100vh;
position: fixed;
top: 0;
width: 100%;
}
.modal__bg{
background: rgba(0,0,0,0.8);
height: 100vh;
position: absolute;
width: 100%;
}
.modal__content{
background: #fff;
left: 50%;
/* padding: 40px; */
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
width: 60%;
text-align: left;

}
1
  • .lang-item input.modal-radio のwidthだったんですね!何度も検証ツールみているのに気づけませんでした。ラジオボタンだけなのになんでこんなに長いんだろうと思ってたのですが、長さを縮めるという発想に至らなかったです。diplay:noneの件も承知しました。ご丁寧にありがとうございました。 2021年9月12日 14:26

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。