0

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

我想要完成的是让复选框位于两列布局中。没有 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>

4

4 回答 4

0

https://jsfiddle.net/td5m52kc/
你在找这样的东西吗？我删除了你所有的 span 标签并将它们包装在 div 中以分别向左和向右浮动，并为右侧 div 设置边距以使其相对保持在适当的位置。
新的 CSS：

.chckbox {
  display: inline-block;
  float: left;
}
#firstlist {
  float: left;
  width: 30%;
}
#secondlist {
  float: right;
  width: 30%;
  margin-right: 50px;
}

HTML：

  <div id=firstlist>
    <p class="form-field  GRG_Member pd-radio required  ">
      <label class="field-label">Member</label>
      <br>
      <input type="radio"   value="27665" onchange="" />
      <label class="inline" >1 </label>
      <br>
      <input type="radio"  value="27667" onchange="" />
      <label class="inline" >2</label>
      <input type="radio"  value="27669" onchange="" />
      <label class="inline" >3</label>
      <input type="radio"   value="27671" onchange="" />
      <label class="inline" >4</label>
    </p>
  </div>
  <div style="display:none"></div>
  <div id="secondlist">    
    <p class="form-field  GRG_Professional pd-checkbox required    ">
      <label class="field-label">Professional?</label>
      <br>
      <input class="chckbox" type="checkbox" value="27679" onchange="" />
      <label class="inline">Yes</label>
      <br>
      <input class="chckbox" type="checkbox" value="27681" onchange="" />
      <label class="inline">No</label>
      <br>
      <input class="chckbox" type="checkbox" value="27683" onchange="" />
      <label class="inline">Maybe</label>
      <br>
      <input class="chckbox" type="checkbox" value="27685" onchange="" />
      <label class="inline">Don't Know</label>
      <br>
    </p>
  </div>
于 2017-03-24T17:49:11.207 回答
0

您有一些与.value. 我刚刚删除了.value span包装您的复选框部分的内容，这使所有内容都内联，但是复选框及其标签不在自己的行上。为了解决这个问题，您可以替换span包装每个复选框/标签对的 s，或者只制作那些display: block;. 我添加了.pd-checkbox span {display: block;}

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

.pd-checkbox span {
  display: block;
}
<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>
<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>
  </p>
  <div style="display:none"></div>
  <p class="submit">
    <input type="submit" accesskey="s" value="SUBMIT" />
  </p>
</form>

于 2017-03-24T17:55:00.830 回答
0

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

在这里看小提琴

于 2017-03-24T17:46:05.297 回答
0

编辑这个答案。我相信您现在要求的是：

#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: inline;
    clear: right;
}
span.value span {
    float: left;
    width: 50%;
}
.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>

或者

完全废弃它并将引导 css cdn 添加到您的布局模板中。这样，您可以将类 col-sm-6 添加到 Pardot 中的表单字段。

于 2017-03-27T21:20:15.440 回答