【发布时间】：2017-08-17 18:04:04
【问题描述】：
编辑： 首先，感谢您的帮助，我现在意识到我的问题措辞不正确。
我想要完成的是让复选框位于两列布局中。没有 Radio 和 Check box 部分并排浮动，而是让复选框选项位于两列显示中，类似于：http://www.clearcom.com/support/software-update-form
复选框采用两列布局
这是真正的问题：我根本无法更改 HTML 的代码，我无法控制它，因为它是我正在编辑的 Pardot 表单，并且被告知我必须仅使用 CSS 来控制元素。
#pardot-form {
max-width: 500px;
width: 400px;
padding: 10px 20px;
background: #00AEC7;
margin: 10px auto;
border-radius: 8px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
form.form input.text,
form.form textarea.standard,
form.form input.date {
background-color: rgba(255, 255, 255, 0.8);
border: none;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
font-size: 15px;
color: #000000;
margin: 0;
outline: 0;
padding: 7px;
width: 90%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
box-shadow: 0 1px 0 rgha(0, 0, 0, 0.03) inset;
margin-bottom: 5px;
}
input.radio {
background: #FF0004 !important;
}
form.form select {
background-color: rgba(255, 255, 255, 0.8);
border: none;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
font-size: 15px;
color: #000000;
margin: 0;
outline: 0;
padding: 7px;
width: 90%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
box-shadow: 0 1px 0 rgha(0, 0, 0, 0.03) inset;
margin-bottom: 5px;
}
form.form input.text:focus,
form.form textarea.standard:focus,
form.form input.date:focus,
form.form select:focus {
background: #ffffff;
-moz-box-shadow: 0 0 8px #19478C;
-webkit-box-shadow: 0 0 8px #19478C;
box-shadow: 0 0 8px #19478C;
border: 1px solid #19478C;
}
form.form p label {
font-size: 18px;
color: #ffffff !important;
font-weight: bold;
padding-top: 0px;
padding-bottom: 5px;
font-family: Helvetica, Arial, sans-serif;
float: none;
text-align: left;
width: 75%;
}
.interest {
width: 90% !important;
height: 100px !important;
}
form.form p.required label,
form.form span.required label {}
form.form p.required label.field-label:after {
content: "*";
color: #FF0004;
}
form.form p.submit {
margin-left: 5px;
}
form.form p.no-label {
margin-left: 50px;
}
form.form p span.description {
margin-left: 0px;
}
/* SUBMIT BUTTON --------------------*/
form.form p.submit input {
position: relative;
display: block;
padding: 10px 15px 12px 15px;
border-radius: 11px;
color: #ffffff;
margin: 0 auto;
background: #19478C;
font-size: 18px;
text-align: center;
font-style: bold;
width: 70%;
border: 1px solid #3582F4;
border-width: 1px 1px 5px;
margin-bottom: 10px;
}
form.form p.submit input:hover {
background: #0054D4;
}
form.form p.submit {
margin-top: 0px;
margin-bottom: 0px;
}
/* SUBMIT BUTTON END -----------*/
.pd-radio,
.pd-checkbox {
float: left;
width: 98%
}
.value .inline {
width: 20%;
display: block;
clear: right;
}
.value {
padding-left: 5px;
width: 98%;
display: block;
clear: right;
}
.inline {
width: 50%;
display: inline;
clear: right;
}
.value input[type=radio] {
float: left;
display: inline;
}<form action="http://www.website.com" class="form" id="pardot-form">
<p class="form-field first_name pd-text required ">
<label class="field-label">First </label>
<input type="text" value="" class="text" size="30" maxlength="40" onchange="" />
</p>
<div style="display:none"></div>
<p class="form-field last_name pd-text required ">
<label class="field-label">Last </label>
<input type="text" value="" class="text" size="30" maxlength="80" onchange="" />
</p>
<div style="display:none"></div>
<p class="form-field company pd-text required ">
<label class="field-label">Company</label>
<input type="text" value="" class="text" size="30" maxlength="255" onchange="" />
</p>
<div style="display:none"></div>
<p class="form-field email pd-text required ">
<label class="field-label">Email</label>
<input type="text" value="" class="text" size="30" maxlength="255" />
</p>
<div style="display:none"></div>
<p class="form-field country pd-select required form-field-master">
<label class="field-label">Country</label>
<select class="select" onchange="">
<option value="27007" selected="selected"></option>
<option value="27009">United States</option>
<option value="27011">Canada</option>
<option value="27013">Afghanistan</option>
</select>
</p>
<div style="display:none"></div>
<p class="form-field state pd-select required form-field-slave dependentFieldSlave">
<label class="field-label">State/Territory</label>
<select class="select" onchange="">
<option value="27493" selected="selected"></option>
<option value="27495">Alabama</option>
<option value="27497">Alaska</option>
<option value="27499">Alberta</option>
<option value="27501">Arizona</option>
<option value="27503">Arkansas</option>
</select>
</p>
<div style="display:none"></div>
<p class="form-field Product_Interest pd-select required ">
<label class="field-label">Product Interest</label>
<select size="5" multiple="multiple" onchange="" class="interest">
<option value="27623">Choice 1</option>
<option value="27625">Choice 2</option>
<option value="27627">Choice 3</option>
<option value="27629">Choice 4</option>
<option value="27631">Choice 5</option>
<option value="27633">Choice 6</option>
<option value="27635">Choice 7</option>
</select>
</p>
<div style="display:none"></div>
<p class="form-field Customer_Type pd-select required ">
<label class="field-label">Customer Type</label>
<select class="select" onchange="">
<option value="" selected="selected"></option>
<option value="27657">Value 1</option>
<option value="27659">Value 2</option>
<option value="27661">Value 3</option>
<option value="27663">Value 4</option>
</select>
</p>
<div style="display:none"></div>
<p class="form-field GRG_Member pd-radio required ">
<label class="field-label">Member</label>
<span class="value"> <span class="" style="">
<input type="radio" value="27665" onchange="" />
<label class="inline" >1 </label>
</span> <span class="" style="">
<input type="radio" value="27667" onchange="" />
<label class="inline" >2</label>
</span><span class="" style="">
<input type="radio" value="27669" onchange="" />
<label class="inline" >3</label>
</span><span class="" style="">
<input type="radio" value="27671" onchange="" />
<label class="inline" >4</label>
</span></span>
</p>
<div style="display:none"></div>
<p class="form-field GRG_Professional pd-checkbox required ">
<label class="field-label">Professional?</label>
<span class="value"><span>
<input type="checkbox" value="27679" onchange="" />
<label class="inline" >Yes</label>
</span><span>
<input type="checkbox" value="27681" onchange="" />
<label class="inline" >No</label>
</span><span>
<input type="checkbox" value="27683" onchange="" />
<label class="inline" >Maybe</label>
</span><span>
<input type="checkbox" value="27685" onchange="" />
<label class="inline" >Don't Know</label>
</span> <span>
<input type="checkbox" value="27687" onchange="" />
</span></span>
</p>
<div style="display:none"></div>
<p class="submit">
<input type="submit" accesskey="s" value="SUBMIT" />
</p>
</form>【问题讨论】：
标签： html css checkbox radio-button pardot