Question

我的单选按钮不会均匀分开。我试过添加，“margin-right：250px;”以及另一种方法，但他们不会给我我正在寻找的结果。我希望按钮在页面上均匀分布，并保持中心对齐。此外，我已经尝试添加样式单选按钮旁边的文本，但我不知道如何将其合并到我的代码的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的{{1}}设置为span ，并设置一个共同的宽度。

inline-block

CSS：

<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>

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

Answer 3

对于现代浏览器，您可以使用Flexbox使用justify-content: space-between;：

均匀分配元素

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

对于其他浏览器，您可以使用text-align: justify和伪元素技巧来模拟此（类型）以强制换行。请参阅示例in this edited fiddle。

如何均匀分隔单选按钮

3 个答案: