Align a label to top of radio button in CSS

I tried to align a label on the top of a radio button in CSS.

What I want to do: http://imageshack.us/photo/my-images/28/radiobuttons.png/

My code is:

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

Solution

you can use styled list like this:

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