Html 单选选项文本对齐

Posted 2023-03-05

【中文标题】Html 单选选项文本对齐

【英文标题】：Html radio option text alignment

【发布时间】：2013-03-16 11:47:11

【问题描述】：

我在对齐单选选项时遇到了这个问题。我正在尝试样式的一个示例是：

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

谢谢。

【问题讨论】：

这不取决于用户浏览页面的方式吗？在较大的分辨率下，长文本可能意味着 300 个字符，而在较小的分辨率下，可能是 30 个。

【参考方案1】：

使用无序列表作为容器。

<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

【参考方案2】：

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

【参考方案3】：

适当的样式和填充 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/

【讨论】：

谢谢杰梅尔。这正是我正在寻找的。​​span>