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