

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

[code]

    <!-- 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-->
    
[/code]

[code]

    /* モーダル */
    .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;
    
    }
    
    コンタクトのｃｓｓ
    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;
    }
    
[/code]

[![画像の説明をここに入力](https://i.stack.imgur.com/LZMK2.jpg)](https://i.stack.imgur.com/LZMK2.jpg)

[![画像の説明をここに入力](https://i.stack.imgur.com/cqKWJ.jpg)](https://i.stack.imgur.com/cqKWJ.jpg)


CC BY-SA 4.0
2021-09-12T02:57:39.353
82437
2021-09-12T13:19:57.987
2021-09-12T13:19:57.987
3060
48054
question
html css
inputのラジオボタンが移動できない


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

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

[code]

    .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;
    
    }
    
[/code]


CC BY-SA 4.0
2021-09-12T13:16:38.510
82443
2021-09-12T13:16:38.510
45045
82437
answer