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.leftBlock { position: relative; float: left; width: 275px; }
<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>
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.
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 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.
you can change vertical level of input by changing the attribute top
in the 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.