我可以用这张图片描述我想要的最佳方式:
如何使文本与顶部文本对齐,而不是单选按钮?
相关CSS如下:
.basic-grey {
width: 600px;
margin-right: auto;
margin-left: auto;
background: #FFF;
word-wrap: break-word;
padding: 20px 30px 20px 30px;
font: 12px "Myriad Pro", sans-serif;
color: #888;
text-shadow: 1px 1px 1px #FFF;
border:1px solid #DADADA;
}
}
.basic-grey h1>span {
display: block;
font-size: 11px;
}
.basic-grey label {
display: block;
margin: 0px 0px 5px;
}
.basic-grey label>span {
float: left;
width: 80px;
text-align: right;
padding-right: 10px;
margin-top: 10px;
color: #888;
}
.basic-grey select {
background: #FFF url('down-arrow.png') no-repeat right;
background: …
Run Code Online (Sandbox Code Playgroud) 假设以下标记:
<fieldset>
<legend>Radio Buttons</legend>
<ol>
<li>
<input type="radio" id="x">
<label for="x"><!-- Insert multi-line markup here --></label>
</li>
<li>
<input type="radio" id="x">
<label for="x"><!-- Insert multi-line markup here --></label>
</li>
</ol>
</fieldset>
Run Code Online (Sandbox Code Playgroud)
如何设置单选按钮标签的样式,使其在大多数浏览器中看起来如下(IE6 +,FF,Safari,Chrome: