はじめまして、デザイナー歴6年になります。
元々、グラフィックメインで活動しており、
この度WEBもできるようになたいと思い登録いたしました。
不慣れな部分が多々あるかもしれませんが
何卒よろしくお願いいたします。
プロフィールをもっとみる
--
募集をシェアしてメンターを探そう
※ この募集は締め切られました。
【CSS】画像の上に載せたラジオボタンを画像に合わせて縮小させたい
2021年12月5日
単発
予算
3,000円 〜
3,000円
提案数
2人が提案中
応募期限
終了
急いでいるため即対応いただける方でお願いいたします。
アンケート型のLPで、ラジオボタンを実装したのですが、
ブラウザで縮小した時に改行されてしまいます。
背景の画像幅(750px)に合わせてボタン自体が縦横はみ出ないように縮小したいです。
◆該当html
<div class="cta">
<img src="img/1_b.jpg?211121" alt="" class="lp-img">
<div class="list">
<dl>
<dd>
<input type="checkbox" name="CheckboxGroup2" value="チェックボックス" id="Group2_0" class="checkbox02" /><label for="Group2_0" class="check_label">はい</label>
<input type="checkbox" name="CheckboxGroup2" value="チェックボックス" id="Group2_1" class="checkbox02" /><label for="Group2_1" class="check_label">いいえ</label>
</dd>
</dl>
</div> </div>
◆該当CSS
.list{
margin: 0 auto;
}
.check_label:hover {
background-color: #fddff1;
}
.check_label {
left: 0;
display: block;
float: left;
margin: 10px;
width: 300px;
height: 100px;
text-align: center;
line-height: 100px;
cursor: pointer;
color: #c62483;
border: 2px solid #c62483;
border-radius: 5px;
font-size: 30px;
}
.cta {
position: relative;
}
.cta .list{
position: absolute;
top: 50px;
box-sizing: border-box;
width: 100%;
padding: 0 6% 0;
}