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个选项。

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

查看小提琴http://jsfiddle.net/QqDgA/

Answer 2

使用无序列表作为容器。

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

设置样式，使列表项的宽度为列表本身的1/2，并将它们向左浮动。

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

Answer 3

您可以使用JS检查列表中每个项目的字符长度，然后根据字符数有2种不同的样式。如果任何一个项目超过一定数量的字符，则可以使宽度为50％，而不是25％。

Html无线电选项文本对齐

3 个答案: