Question

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

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

Answer 1

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

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

Answer 2

将每个按钮宽度设置为50％并将它们设置为float：left。如果您想在按钮之间留出空格，则需要执行width: 49%; margin-left: 1%;

之类的操作

同一行上的全宽输入按钮

2 个答案: