CODEWITHSUNDEEP
javascripthtmlcssvertical-alignmenttext-alignment
Paul Hoang
Paul Hoang

Reputation: 1074

Html radio option text alignment

I'm having this issues with aligning the radio options. An example of what I'm trying to style is:

Question: How are you doing? 
A.I'm doing fine             B. OK                C. So so             D. not so good

A, B, C, D are each prefixed with a radio buttons with class = 'option'

To make sure the A's options (similarly, B's , C's, D's) are vertically aligned, I'm doing: 

.option {
   width: 25%; 
   display: inline-block;
}

This works fine if the texts are not too long. If the texts are too long, I need to arrange them either as:

1) Having 2 options each line if possible

A. <long A text>                                       B. <B's text> 
C. <C's text>                                          D. <D's text>

2) Having 1 option each line if any of the texts is really too long for the setting 1) above.

A. <too long A text>
B. <B's text>
...

How can I achieve this effect? Any suggestions for CSS, Js are good for me.

Thanks.

Upvotes: 0

Views: 172

Answers (3)

jermel
jermel

Reputation: 2336

Style and pad appropriately html

<ul class="short">
  <li>a long text</li>
  <li>b text</li>
  <li>c long text</li>
  <li>d text</li>
</ul>

css

ul {
   width: 500px;
}
li {float:left; margin-right:20px;}
ul.long > li { width: 500px;}
ul.med > li {width: 220px; /* (500-40)/2 */}
ul.short > li {width: 105px; /* (500-80) /2 */}

js

find width of longest li and add appropriate class to ul

see the fiddle http://jsfiddle.net/QqDgA/

Upvotes: 1

Matto
Matto

Reputation: 236

You can use JS to check the length of characters in each item of the list, then have 2 different styles based on the number of characters. If any one of the items is over a certain number of characters you can then make the width 50%, instead of 25%.

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114377

Use an unordered list as a container.

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>

Style it so that the list items are 1/2 as wide as the list itself and float them left.

ul, li {margin:0;padding:0;list-style:none}
ul {width:500px:}
li {float:left;width:250px}

Upvotes: 0

Related Questions