Html无线电选项文本对齐

我对齐无线电选项有这个问题。什么我想要的风格的一个例子是：Html无线电选项文本对齐

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

A，B，C，d均会加上一流的单选按钮=“选项”

为了确保A的选项（同样，B's，C's，D's）垂直对齐，我在做：

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

谢谢。

来源

2013-03-26 Paul Hoang

难道不是取决于如何在美国呃在浏览页面？在较大的分辨率下，长文本可能意味着300个字符，而在较小的分辨率下，它可以是30. – hjpotter92 2013-03-26 15:43:27

风格和垫适当 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 */}

find width of longest li and add appropriate class to ul

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

来源

2013-03-26 16:05:16 jermel

谢谢Jermel。这正是我正在寻找的。 – 2013-03-27 14:42:58

使用无序列表作为容器。

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

对其进行设计，使列表项目与列表本身一样宽，并将它们左移。

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

来源

2013-03-26 15:44:33

您可以使用JS来检查字符的长度在列表中的每个项目，则有基于字符数2种不同的风格。如果任何一个项目超过一定数量的字符，则可以使宽度为50％，而不是25％。

来源

2013-03-26 15:50:22 Matto

Html无线电选项文本对齐

回答

相关问题