0

我在对齐收音机选项时遇到了这个问题。我试图设计的一个例子是：

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 的任何建议对我都有好处。

谢谢。

4

3 回答 3

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/

于 2013-03-26T16:05:16.037 回答
0

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

于 2013-03-26T15:50:22.380 回答
0

使用无序列表作为容器。

<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}
于 2013-03-26T15:44:33.773 回答