html - Pardot 表格 : Two Column Layout for Radio/Checkboxes

Question

编辑:首先，感谢您提供的帮助，我现在意识到我的问题措辞不正确。

我想要完成的是让复选框位于两列布局中。没有单选框和复选框部分并排 float ，而是让复选框选项位于两列显示中，类似于: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>

Answer 1

您在 <p> 中有列表标签。默认情况下，段落始终为容器宽度的 100%。只需将它们的宽度设置为 50%。

参见 fiddle here