Question

我看到很多关于样式化复选框的答案，以便您获得一个复选框，后跟其标签。但无法找到我的问题的答案。我试图在NetSuite的在线客户表单中呈现相同的行为，有趣的是先将复选框放在底部，然后将标签放在底部。任何人都可以帮助吗？代码片段如下：

<HTML>
<Head>
<title>OnlineLeadForm</title>
<base href="https://forms.netsuite.com/">
<script type=text/javascript>
function kVoid() { return; }
function kenshoo_conv(type,value,orderId,promoCode,valueCurrency) {
var hostProtocol = (("https:" == document.location.protocol) ? "https" : "http");
var url = hostProtocol+"://5039.xg4ken.com/media/redir.php?track=1&id=4a9f7db0-00a0-4b70-91b3-dddf4a74da2e&type="+ type + "&val=" + value + "&orderId=" + orderId + "&valueCurrency=" + valueCurrency + "&promo-Code=" + promoCode + "&ref=" + document.referrer;
var a = new Image(1,1);
a.src = url;
a.onload = function() { kVoid(); }
}
</script>
<style type="text/css">
iframe {
border:none;
}

body {
background: #ffffff;
font-family: Arial, Helvetica, Sans;
font-size: 13px;
padding: 0;
}


form {
margin-top: 50px;
min-height: 400px; 
width: 420px;
max-width: 420px;
border:none;
}

input, select, textarea {
font-family: 'Lucida Grande';
font-size: 12px !important;
border: #DED9D3 1px solid;
width: 100%;
padding: 5px 7px;
color: #685C54 !important;
}

textarea {
height: 100px;
resize: none; 
}

#gtk_details {
padding: 10px;
border: 1px solid silver;
background: white;
margin: 0 0 10px 0; 
}

#gtk_details p {
color: #685C54;
font-size: 10px;
line-height: 14px;
margin: 0 0 12px 0;
white-space: normal;
}

label {
display: block;
cursor: pointer;
font-family: Arial, Helvetica, Sans;
font-size: 13px;
font-weight: normal;
color: #685C54;
margin-bottom: 0.2em;
}

td.smalltextnolink {
width: 120px;
height: 40px;
padding-right: 10px;
}

td {
padding-bottom: 10px;
}

fieldset {
margin: 0;
border: 0;
padding: 0;
}

legend {
background: #B79F8C;
padding: 5px 15px;
color: #fff;
font-weight: lighter;
}

form p {
margin: 0.5em 0;
}

p.splitInput {
float: left;
width: 202px;
}

p.splitInput.margin {
margin-right: 15px;
}

p.splitInput#cityBlock {
width: 200px;
}
p.splitInput#stateBlock {
width: 75px;
}
p.splitInput#zipBlock {
width: 115px;
}

p.splitInput#OptInNewLeadsBlock {
    width: 400px;
    float: left;
    }

p.splitInput input, p.splitInput select {
width: 100%; /* Inputs should be 100% of the parent p tag's width */ 
}

.container {
  display: inline-block;
  white-space: nowrap;
  float: left;
}

.clear {
clear: both;
height: 0;
}

input#submit_btn {
width: auto;
float: left;
border: 0;
padding: 0;
margin: 0;
}

</style>

</Head>
<body>
<NLFORM>
<!-- Hidden input -->
<nlcategory>
<!-- Hidden input -->

<fieldset>
<p>
<label for="companyname">Business name <img alt="Required" src="https://forms.netsuite.com/images/chiles/pageTitle/required.png"></label>
<nlcompanyname>
</nlcompanyname></p> 

<p class="splitInput margin">
<label for="firstname">First name <img alt="Required" src="https://forms.netsuite.com/images/chiles/pageTitle/required.png"></label>
<nlfirstname>
</nlfirstname></p>

<p class="splitInput">
<label for="lastname">Last name <img alt="Required" src="https://forms.netsuite.com/images/chiles/pageTitle/required.png"></label>
<nllastname>
</nllastname></p>
<div class="clear"></div>
<p class="splitInput margin">
<label for="email">Email<img alt="Required" src="https://forms.netsuite.com/images/chiles/pageTitle/required.png"></label>
<nlemail>
</nlemail></p>

<p class="splitInput">
<label for="website" value="test">Website</label>
<nlurl>
</nlurl></p>
</fieldset>
<fieldset>
<p class="splitInput margin">
<label for="phone">Phone<img alt="Required" src="https://forms.netsuite.com/images/chiles/pageTitle/required.png"></label>
<nlphone>
</nlphone></p>
<div class="clear"></div>
<p class="splitInput margin" id="cityBlock">
<label for="city">City</label>
<nlcity>
</nlcity></p>
<p class="splitInput margin" id="stateBlock">
<label for="state">State</label>
<nlstate>
</nlstate></p>
<p class="splitInput" id="zipBlock">
<label for="zipcode">Zip</label>
<nlzipcode>
</nlzipcode></p>
<div class="clear"></div>
<p class="splitInput margin">
<label for="country">Country<img alt="Required" src="https://forms.netsuite.com/images/chiles/pageTitle/required.png"></label>
<nlcountry>
</nlcountry>
</p>

<div class="clear"></div>

<div class="container">
<p>
<nlcustentity89>
</nlcustentity89>
       <label for="OptInNewLeads">Be the first to hear about new arrivals, exclusive offers and more.</label>
</p>
</div>

<p class="splitInput">
<input id="submit_btn" onclick="javascript:kenshoo_conv('wholesalelead','0','0','0','USD');" alt="Submit" src="https://www.manduka.com/media/site-media/wholesale/130118_btn_sbmt_V2.jpg" type="image">
</p>
</fieldset>
</nlcategory>
</form>
</Body>
</HTML>

其中custentity89是NetSuite帐户中自定义复选框实体字段的内部ID。附件是NetSuite如何在我们的在线客户表单中呈现当前复选框的屏幕截图。我只是试图在同一行的标签文本左侧显示复选框，就像常规复选框字段一样。

更新1：将标签更改为评论中提到的Quiver之类的内联块后，我的表单现在如下所示： Online customer form

Answer 1

如果没有所有代码，很难知道究竟是什么问题。但请尝试将您的标签从display: block更改为display: inline-block。

如何在NetSuite的在线客户表单中对齐标签文本左侧的复选框？

1 个答案: