Question

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

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

Answer 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
}

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

2 个答案: