在CSS中将标签与单选按钮顶部对齐
在CSS中将标签与单选按钮顶部对齐
提问于 2012-12-18 23:44:18
我尝试在CSS中将标签与单选按钮的顶部对齐。
我想做的是：http://imageshack.us/photo/my-images/28/radiobuttons.png/
我的代码是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
label {
display:block;
}
</style>
</head>
<body>
<form>
<input type="radio" name="opinions" id="radio-1" />
<label for="radio-1">Yes</label>
<input type="radio" name="opinions" id="radio-2" />
<label for="radio-2">No</label>
<input type="radio" name="opinions" id="radio-3"/>
<label for="radio-3">I don't know</label>
</form>
</body>
</html>回答 2
Stack Overflow用户
回答已采纳
发布于 2012-12-21 18:14:08
你可以像这样使用样式列表：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
label {
display:block;
}
ul {
list-style: none;
display: block;
}
ul li {
float: left;
display: block;
width: 85px;
text-align: center;
}
</style>
</head>
<body>
<form>
<ul>
<li><input type="radio" name="opinions" id="radio-1" />
<label for="radio-1">Yes</label>
</li>
<li>
<input type="radio" name="opinions" id="radio-2" />
<label for="radio-2">No</label>
</li><li>
<input type="radio" name="opinions" id="radio-3"/>
<label for="radio-3">I don't know</label>
</li>
<ul>
</form>
</body>
</html>Stack Overflow用户
发布于 2012-12-21 18:08:08
将其放在div中，并对齐文本。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
label {
display:block;
}
</style>
</head>
<body>
<form>
<div>
<input type="radio" name="opinions" id="radio-1" />
<label for="radio-1">Yes</label>
</div>
<input type="radio" name="opinions" id="radio-2" />
<label for="radio-2">No</label>
<input type="radio" name="opinions" id="radio-3"/>
<label for="radio-3">I don't know</label>
</form>
</body>
</html>
div{
text-align: center
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13936492
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号