CSS alignment of text of HTML INPUT radio element.

Question

I have an input[type="radio"] element inside a block container of fixed width. The supporting text for the input element does not fit in a single line, and falls over 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>

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

How would I be able to style the input element (or its text) such that every other line the text falls to starts at the same indent level the first line does? The first line of text has to be at the same vertical level as the input element.

Any help will be much appreciated.

Answer 1

The container could use positive left padding, and a negative text-indent.

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

Here's an example: http://jsbin.com/edota

Answer 2

Here's one option:

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

You turn the label into a floating block element with a left margin.

Answer 3

you can change vertical level of input by changing the attribute "top" in "class" or "id" of that input, here the code is:

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