HTML输入单选元素文本的CSS对齐

容器可以使用正左 padding ,和一个负数 text-indent .

.leftBlock {
    padding-left: 20px;
    text-indent: -20px;
}
.leftBlock input {
    width: 20px;
}

Here's an example

这里有一个选择:

<style>
div.leftBlock {
    position:relative; 
    float:left; 
    width:275px;
} 

.radio {
    float: left;
}

.radio_label {
    display: block;
    margin-left: 1.5em;
}
</style>
<div class="leftBlock">
    <input type="radio" name="foo" value="bar" id="option" class="radio"/>
    <span class="radio_label">
    This is a rather long supporting text that does not fit in
    one line.
    </span>
</div>

将标签转换为具有左边框的浮动块元素。

可以通过更改属性来更改输入的垂直级别 top 在 class id 对于该输入,这里的代码是:

<style type="text/css">
    .main {
        height:50px;
        line-height:50px;
        font-size:25px;
        position:relative;
    }

    .rd {
        position:inherit;
        top:-2px;
    }
</style>

<div id="main">
    <input type="radio" id="rd" />
    This is a rather long supporting text that does not fit in one line.
</div>