Indenterat text för Radiobuttons

HammerBoyMedlem sedan feb. 2006144 inlägg

Frågan23 feb. 2009 15:21#1

Hello World!

Jag har en bunt radiobuttons som är linjerade till sidans vänsterkant. Efter varje radiobutton har jag en förklarande text. På vissa radiobuttons så är texten ganska lång. Så lång att texten radbryts. Den text som hamnar på den undre raden linjeras till vänster och hamnar alltså under radioknappen. Jag skulle vilja att texten linjerades med första bokstaven i hela texten så att det såg lite snyggare ut. Detta går ju självklart att fixas med lite tabelltrixande men jag måste självklart fixa detta utan att blanda in tabeller.

Någon som har någon bra idé?

liljaMedlem sedan juli 20041 183 inlägg

28 feb. 2009 09:59#2

Du skulle kanske kunna använda relativ positionering? Här är ett exempel (med riktigt fula färger, hehe):

<div style="width: 100px; background-color: #996600;">
    <input type="radio" id="test1" name="test" style="position:relative; float: left; width: 14px;" />
    <label for="test1" style="display: block; position:relative; float: left; background-color: #993366; width: 78px;">Val 1</label><br />
    <input type="radio" id="test2" name="test" style="position:relative; float: left; width: 14px; clear: left;" />
    <label for="test2" style="display: block; position:relative; float: left; background-color: #CCCCCC; width: 78px;">Val nummer 2 som är lite längre</label><br />
    <input type="radio" id="test3" name="test" style="position:relative; float: left; width: 14px; clear: left;" />
    <label for="test3" style="display: block; position:relative; float: left; background-color: #99CC00; width: 78px;">Val 3</label><br />
    <div style="clear: both;" />
</div>