將標籤對齊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>

來源

2012-12-18 CBuzatu

你可以使用樣式表是這樣的：

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

來源

2012-12-21 10:14:07 Cr4ckm3

把它放在一個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 
}

來源

2012-12-21 10:08:07 Chanckjh

將標籤對齊CSS中單選按鈕的頂部

回答

相關問題