javascript - HTML 单选选项文本对齐方式

Question

我在调整单选选项时遇到了这个问题。我尝试设置样式的一个示例是:

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

A、B、C、D 每个都带有带有 class = 'option' 的单选按钮

为了确保 A 的选项(类似地，B 的、C 的、D 的)垂直对齐，我正在做:

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

如果文本不是太长，这会很好地工作。如果文本太长，我需要将它们安排为:

1) 如果可能，每行有 2 个选项

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

2) 如果任何文本对于上面的设置 1) 来说确实太长，则每行有 1 个选项。

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

我怎样才能达到这个效果？对 CSS、Js 的任何建议对我都有好处。

谢谢。

Answer 1

样式和衬垫适当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

参见 fiddle http://jsfiddle.net/QqDgA/