html - 重力形式捐赠形式选项按钮

Question

我正在为一个非营利组织创建捐款。表格位于 https://thecommunityproject.org/donate/ .我正在使用 CSS 将单选按钮设置为常规按钮的样式，但我遇到了其他元素在选项按钮旁边向上移动的问题。我还需要按钮能够响应，就像网站设计的其余部分一样。这是我为单选按钮自定义的 CSS:

input[type=radio] {
display:none;
}

input[type=radio] + label {
border: none;
float: left;
position:relative;
margin-left: 0.2em;
background-color: #BCD676;
border-radius: 0px;
color: #fff;
text-decoration: none;
letter-spacing: 1px;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
vertical-align: top;
padding: 1em 2.0em;
}

谢谢!

Answer 1

float: left; radio css 是问题所以删除

然后为这个 body .gform_wrapper form .gform_body ul, body .gform_wrapper form .gform_body ul li 添加 display: inline-block;

然而，电子邮件和获取 awsome 电子邮件也是内联的，因此我建议仅对具有捐赠金额、信用卡捐赠和 Paypal 的列表元素使用 inline-block。至于隐私信息，您可以设计得更好一些，这样就不会拉伸(stretch)