如何均勻排列單選按鈕

Question

我的單選按鈕不會均勻分布。 我嘗試添加“右邊距：250像素；” 以及其他方法，但它們不會給我我想要的結果。 我希望按鈕在頁面上均勻分布並保持居中對齊。 我也嘗試在單選按鈕旁邊添加文本樣式，但是我不知道如何將其合並到代碼的CSS中。 該代碼確實在體內起作用。

這是JSFiddle： http : //jsfiddle.net/2DJsP/embedded/result/

這是CSS：

#navlist li {
margin-left: auto;
margin-right: auto;
}
style="color:#fa7f28; font-size:20px; font-weight:bold;

Answer 1

給定您當前擁有的HTML標記，以下CSS是使用最少CSS的方法：

#navlist li > input { display:inline-block; margin:0 5px 0 50px; }

http://jsfiddle.net/2DJsP/4/

注意， margin和padding不適用於內聯元素。 使用inline-block顯示可以啟用margin和padding ，同時將元素及其關聯的文本保留在當前流中。

Answer 2

假設你控制標記，一個簡單的方法是將包裹的單選按鈕和相關聯的文本在span元件，設置display的的span到inline-block ，並設置一個共同的寬度。

<span><input type="radio" onclick=tryToMakeLink(); name="q1" value="AT&T" />ATT</span>
<span><input type="radio" onclick=tryToMakeLink(); name="q1" value="Other" />Other</span>
<span><input type="radio" onclick=tryToMakeLink(); name="q1" value="Unlocked" />Unlocked</span>

CSS：

#navlist li span {
    display: inline-block;
    width: 6em;
}

演示： http ： //jsfiddle.net/2DJsP/3/

Answer 3

對於現代瀏覽器，您可以使用帶有justify-content: space-between; Flexbox均勻地分配元素justify-content: space-between; ：

#navlist li {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
}

對於其他瀏覽器，您可以使用text-align: justify來模擬（某種） text-align: justify和偽元素技巧來強制換行。 請參閱此編輯的小提琴中的兩個示例。