同一行上的全宽输入按钮答案

【问题标题】：Full width input buttons on same line同一行上的全宽输入按钮
【发布时间】：2013-11-13 00:20:40
【问题描述】：

我正在尝试使两个输入按钮（是/否）显示在同一行，并且两者的最大宽度。我希望按钮的宽度随着浏览器窗口大小的减小而缩小。

http://jsfiddle.net/jasonniebauer/grQGP/1/

<div id="merchant_radio6">
<p>
    Ever accepted credit cards before?
</p>
<div>
    <input type="radio" id="yes" name="accept_cc"/>
        <label for="yes">
            Yes
        </label>
    <input type="radio" id="no" name="accept_cc"/>
        <label for="no">
            No
        </label>
</div>
</div>

#merchant_radio6 input[type="radio"],
#merchant_radio7 input[type="radio"] {
display: none;
}

#merchant_radio6 input[type="radio"] + label,
#merchant_radio7 input[type="radio"] + label {
box-sizing:border-box;
padding: 1rem 3rem 1rem 3rem;
width: 100%;
display: inline-block;
color: #BDC3C7;
background-color: #F2F2F2;
text-align: center;
vertical-align: middle;
cursor: pointer;
border-radius: 3px;
-webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
-webkit-transition-property: border, color, background-color;
-webkit-transition-duration: 0.25s, 0.25s, 0.25s;
-webkit-transition-timing-function: linear, linear, linear;
-webkit-transition-delay: initial, initial, initial;
transition: border .25s linear, color .25s linear, background-color .25s linear;
transition-property: border, color, background-color;
transition-duration: 0.25s, 0.25s, 0.25s;
transition-timing-function: linear, linear, linear;
transition-delay: initial, initial, initial;
}

#merchant_radio6 input[type="radio"] + label:nth-of-type(2),
#merchant_radio7 input[type="radio"] + label:nth-of-type(2) {
margin-left: 1rem;
}

#merchant_radio6 input[type="radio"]:checked + label,
#merchant_radio7 input[type="radio"]:checked + label {
background-color: #3498DB;
color: #FFFFFF;
outline: 0;
}

【问题讨论】：

标签： input width css

【解决方案1】：

将每个按钮的宽度设置为 50% 并将它们设置为浮动：左。如果你想要按钮之间的空间，你需要做类似width: 49%; margin-left: 1%;

【讨论】：

我使用了 inline-block，所以不需要浮动。不过百分比效果很好！

【解决方案2】：

每个按钮都需要设置为 50% 或更小的宽度才能显示在同一行上。当宽度设置为百分位数时，它使用父元素的宽度来计算自己的宽度 - 它不会根据兄弟元素的宽度进行调整。

编辑：因为您设置了边距，所以这些边距需要小于 50% 的宽度。对于大多数（所有？）浏览器，在考虑显示时，边距与宽度分开计算。例如。一个宽度为 50% 且每边有 10px 边距的元素将占据其父容器宽度的 50% 以上。请注意，某些浏览器也可能以这种方式处理边框。

【讨论】：