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

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; 收音机 css 是问题所以删除

然后为此 body .gform_wrapper form .gform_body ul, body .gform_wrapper form .gform_body ul li

添加 display: inline-block;

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

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

Gravity Forms Donation form Option Buttons

html

css

forms

radio

gravity