将标签与 CSS 中的单选按钮顶部对齐答案

【问题标题】：Align a label to top of radio button in CSS将标签与 CSS 中的单选按钮顶部对齐
【发布时间】：2012-12-05 20:48:37
【问题描述】：

我尝试在 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>

【问题讨论】：

标签： css button alignment label radio

【解决方案1】：

你可以像这样使用样式列表：

    <!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>

【讨论】：

【解决方案2】：

将它放在一个 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
}

【讨论】：