CSS alignment of HTML INPUT element text

Question

I have an element input[type="radio"]inside a fixed width container container. Supporting text for an element <input/>does not fit on one line and falls to two or more lines. For example:

<div class="leftBlock">
    <input type="radio" name="foo" value="bar" id="option" />
    This is a rather long supporting text that does not fit in
    one line.
</div>

CSS

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

How could I style an element <input/>(or its text) so that every other line that the text came up with begins at the same level of indentation as the first line? The first line of text should be at the same vertical level as the element <input/>.

Any help would be greatly appreciated.

Answer 1

padding text-indent.

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

Answer 2

:

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

.

Answer 3

you can change the vertical input level by changing the attribute topin classor of idthis input, here is the code:

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