html 如何制作这样的单选按钮？如图

zzyhost 2019-03-11 02:20:57

如图，如何制作这样的单选按钮?

...全文

1588 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2019-03-22

打赏
举报

引用 2 楼 zzyhost 的回复:

怎么均匀分部呢？如图那样，第一排三个按钮得横向均匀铺满屏幕，第二排还有一个输入框

这个要用flex弹性伸缩盒

zzyhost 2019-03-22

打赏
举报

引用 1 楼天际的海浪的回复:



<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8" />

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title> 页面名称 </title>

<style type="text/css">

input[type="radio"] {

	display: none;

}

input[type="radio"]+span {

	display: inline-block;

	width: 150px;

	height: 50px;

	font-size: 30px;

	line-height:50px;

	text-align: center;

	border: 1px solid #999;

	background-color: #fff;

}

input[type="radio"]:checked+span {

	border: 1px solid #090;

	background-color: #6f6;

}

</style>

</head>

<body>

	<label><input type="radio" name="test" checked="checked" /><span>￥100</span></label>

	<label><input type="radio" name="test" /><span>￥200</span></label>

	<label><input type="radio" name="test" /><span>￥500</span></label>

	<label><input type="radio" name="test" /><span>￥1000</span></label>

</body>

</html>

怎么均匀分部呢？如图那样，第一排三个按钮得横向均匀铺满屏幕，第二排还有一个输入框

天际的海浪 2019-03-11

打赏
举报


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
input[type="radio"] {
	display: none;
}
input[type="radio"]+span {
	display: inline-block;
	width: 150px;
	height: 50px;
	font-size: 30px;
	line-height:50px;
	text-align: center;
	border: 1px solid #999;
	background-color: #fff;
}
input[type="radio"]:checked+span {
	border: 1px solid #090;
	background-color: #6f6;
}
</style>
</head>
<body>
	<label><input type="radio" name="test" checked="checked" /><span>￥100</span></label>
	<label><input type="radio" name="test" /><span>￥200</span></label>
	<label><input type="radio" name="test" /><span>￥500</span></label>
	<label><input type="radio" name="test" /><span>￥1000</span></label>
</body>
</html>