ユーザー登録で「300円クーポン」プレゼント!まずは無料登録から!

PO

--

募集をシェアしてメンターを探そう
シェア

※ この募集は締め切られました。

未経験・初心者向け CSS HTML

【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;
}

PO

--

募集をシェアしてメンターを探そう
シェア