🙆‍♀️

cdcd

2025/04/18に公開

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Option Box Centered</title>
<style>
/* 1) 页面级居中 /
body {
margin: 40px 0; / 上下留白，可自由调整 /
display: flex;
justify-content: center; / 水平居中 */
font-family: "Helvetica Neue", Arial, sans-serif;
}

/* 2) 控制卡片宽度为屏幕的一半 /
.card-wrapper {
width: 50vw; / 50% 视口宽度；改成 50% 也可 /
min-width: 300px; / 避免在小屏过窄，可自行调整或删除 */
}

/* 卡片本体 /
.option-box {
border: 1px solid #c5c7ce;
border-radius: 6px;
padding: 10px 16px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
box-sizing: border-box; / 让 padding 不撑破 50vw */
}

/* 左侧：复选框 + 文案 + 问号图标 */
.option-left {
display: flex;
align-items: center;
gap: 6px;
}

.option-left input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
}

/* 蓝色问号圆形图标 */
.info-icon {
width: 18px;
height: 18px;
border-radius: 50%;
background: #0070c0;
color: #fff;
font-weight: bold;
font-size: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>

<div class="card-wrapper">
<label class="option-box">
<span class="option-left">
<input type="checkbox" />
無線LANカード (330円/月)
<span class="info-icon">?</span>
</span>

  <span>Wi-Fiを利用される場合はこちら</span>
</label>

</div>

</body>
</html>

Discussion