0

我的单选按钮不会均匀分布。我试过添加，“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;
4

3 回答 3

3

鉴于您当前拥有的 HTML 标记，以下 CSS 是使用最少 CSS 的方法：

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

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

注意，margin不适padding用于内联元素。使用 displayinline-block可以使用margins 和padding，同时将元素及其关联文本保留在当前流中。

于 2013-09-14T02:26:11.287 回答
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/

于 2013-09-14T02:26:18.743 回答
1

对于现代浏览器，您可以使用 Flexbox 均匀分布元素justify-content: space-between;：

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

对于其他浏览器，您可以模拟这种（某种）使用text-align: justify和伪元素技巧来强制换行。请参阅此编辑过的小提琴中的两个示例。

于 2013-09-14T03:32:10.067 回答