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無線電選項文本對齊

回答

相關問題