0

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

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

2 回答 2

0

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

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

于 2013-11-01T18:21:25.623 回答
0

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

于 2013-11-01T18:25:48.480 回答