无法在HTML或CSS中找到导致某些表单字段缩进的原因。
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<style type="text/css">
.form-style-2 {
max-width: 500px;
padding: 20px 12px 10px 20px;
font: 13px Arial, Helvetica, sans-serif;
}
.form-style-2-heading {
font-weight: bold;
font-style: italic;
border-bottom: 2px solid #ddd;
margin-bottom: 20px;
font-size: 15px;
padding-bottom: 3px;
}
.form-style-2 label {
display: block;
margin: 0px 0px 15px 0px;
}
.form-style-2 label>span {
width: 100px;
font-weight: bold;
float: left;
padding-top: 8px;
padding-right: 5px;
}
.form-style-2 span.required {
color: red;
}
.form-style-2 .tel-number-field {
width: 40px;
text-align: center;
}
.form-style-2 input.input-field {
width: 48%;
}
.form-style-2 input.input-field,
.form-style-2 .tel-number-field,
.form-style-2 .textarea-field,
.form-style-2 .select-field {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border: 1px solid #C2C2C2;
box-shadow: 1px 1px 4px #EBEBEB;
-moz-box-shadow: 1px 1px 4px #EBEBEB;
-webkit-box-shadow: 1px 1px 4px #EBEBEB;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
padding: 7px;
outline: none;
}
.form-style-2 .input-field:focus,
.form-style-2 .tel-number-field:focus,
.form-style-2 .textarea-field:focus,
.form-style-2 .select-field:focus {
border: 1px solid #0C0;
}
.form-style-2 .textarea-field {
height: 100px;
width: 55%;
}
.form-style-2 input[type=submit],
.form-style-2 input[type=button] {
border: none;
padding: 8px 15px 8px 15px;
background: #FF8500;
color: #fff;
box-shadow: 1px 1px 4px #DADADA;
-moz-box-shadow: 1px 1px 4px #DADADA;
-webkit-box-shadow: 1px 1px 4px #DADADA;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.form-style-2 input[type=submit]:hover,
.form-style-2 input[type=button]:hover {
background: #EA7B00;
color: #fff;
}
</style>
<div class="form-style-2">
<form action="https://www.salesforce.com/servlet/servlet.WebToCase?encoding=UTF-8" method="POST"> <input type=hidden name="orgid" value="00D400000009hI6"> <input type=hidden name="retURL" value="http://www.greenbiz.com/events/verge/honolulu/2017">
<div class="form-style-2-heading">As the person submitting the Speaker, please provide your information:</div>
<div><label for="name">Submitter Name:</label><input id="name" maxlength="80" name="name" size="20" type="text" /></div><p>
<div><label for="email">Submitter Email:</label><input id="email" maxlength="80" name="email" size="20" type="text" /></div><p>
<div><label for="phone">Submitter Phone:</label><input id="phone" maxlength="40" name="phone" size="20" type="text" /></div><p>
<div class="form-style-2-heading">Please provide the information for the speaker and session being nominated:</div>
<div><label><span>Speaker First Name:<span
class="required">*</span></span></label><input id="00N400000034IsL" type="text" class="input-field" name="00N400000034IsL" size="20" type="text" /></div><p>
<div><label><span>Speaker Last Name:<span
class="required">*</span></span></label><input id="00N400000034IsM" maxlength="100" name="00N400000034IsM" size="20" type="text" /></div><p>
<div><label><span>Speaker Email:<span class="required">*</span></span></label><input id="00N400000034IsK" maxlength="80" name="00N400000034IsK" size="20" type="text" /></div><p>
<div><label><span>Title:<span class="required">*</span></span></label><input id="00N400000034IsQ" maxlength="80" name="00N400000034IsQ" size="20" type="text" /></div><p>
<div><label><span>Company:<span class="required">*</span></span></label><input id="00N400000034IsF" maxlength="80" name="00N400000034IsF" size="20" type="text" /></div><p>
<div><label><span>Short Bio:<span class="required">*</span></span></label><textarea id="00N400000034IsJ" name="00N400000034IsJ" rows="5" type="text" wrap="soft"></textarea></div><p>
<div><label><span>Speaker's LinkedIn:</span></label><input id="00N400000034IsN" maxlength="255" name="00N400000034IsN" size="20" type="text" /></div><p>
<div><label><span>Speaker's Twitter:</span></label><input id="00N400000034IsO" maxlength="50" name="00N400000034IsO" size="20" type="text" /></div><p>
<div><label><span>What is your prior speaking experience?:<span
class="required">*</span></span></label><textarea id="00N400000034IsI" name="00N400000034IsI" rows="5" type="text" wrap="soft"></textarea></div><p>
<div><label><span>Industry:</span></label><select id="00N400000034IsH" name="00N400000034IsH" title="Industry"><option
value="">--None--</option><option value="Agriculture">Agriculture</option>
<option value="Banking/Finance">Banking/Finance</option> <option
value="Biotechnology">Biotechnology</option> <option
value="Chemicals">Chemicals</option> <option
value="Construction/Building">Construction/Building</option> <option
value="Consulting">Consulting</option> <option
value="Education/Training">Education/Training</option> <option
value="Electronics">Electronics</option> <option value="Food &
Beverage">Food & Beverage</option> <option
value="Government">Government</option> <option
value="Healthcare">Healthcare</option> <option
value="Hotel/Hospitality/Recreation">Hotel/Hospitality/Recreation</option>
<option value="Insurance">Insurance</option> <option
value="Manufacturing">Manufacturing</option> <option
value="Media/Communications">Media/Communications</option> <option
value="NGO">NGO</option> <option value="Non Profit">Non Profit</option> <option
value="Paper Mfg">Paper Mfg</option> <option value="Renewable
Energy/Solar">Renewable Energy/Solar</option> <option
value="Retail">Retail</option> <option
value="Shipping/Logistics">Shipping/Logistics</option> <option
value="Technology/Computers/Networking">Technology/Computers/Networking</option>
<option value="Telecommunications">Telecommunications</option> <option
value="Transportation">Transportation</option> <option
value="Utilities/Energy">Utilities/Energy</option>
<option value="Other">Other</option> </select></div><p>
<div><label for="subject"><span>Subject</span></label><span class="required">*</span><input id="subject" maxlength="80" name="subject" size="20" type="text" /></div><p>
<div><label for="description"><span>Description</span></label><span class="required">*</span><textarea name="description"></textarea></div><p>
<div><label><span>Session Format:<span class="required">*</span></span></label><p>
<select id="00N400000034IsP" name="00N400000034IsP" title="Session
Format">
<option value="">--None--</option><option value="VERGE Talk">VERGE Talk</option>
<option value="General Breakout">General Breakout</option>
<option value="Technical Tutorial: How To's">Technical Tutorial: How To's</option>
<option value="Case Study: Stories from the Field">Case Study: Stories from the Field</option> <option value="Interactive Workshop">Interactive Workshop</option> </select></div>
<div><label><span>How is your session convergent?:<span
class="required">*</span></span></label><textarea id="00N400000034J2N" name="00N400000034J2N" rows="3" type="text" wrap="soft"></textarea></div><p>
<div><label><span>Session Interactivity:<span
class="required">*</span></span></label><textarea id="00N400000034J2S" name="00N400000034J2S" rows="3" type="text" wrap="soft"></textarea></div><p>
<div> <input type=hidden id="00N400000034IsG" name="00N400000034IsG" value="VERGE
Hawaii 2017"></div>
<input type="hidden" id="external" name="external" value="1" />
<input type="submit" name="submit"> </div>
</form>
在HTML中创建了一个表单,表单中的项目正在级联,就像有缩进一样。
表格是什么样的:
答案 0 :(得分:-1)
将以下内容添加到<head>
部分的文件中,或者最好添加到您的css包含文件中。
<style>
label {
display:inline-block;
width:100px;
}
</style>
然后在每行之间添加<br>
或两个。
您可能仍需要稍微大惊小怪才能按照您想要的方式进行操作。有更优雅的方法可以做到这一点,但这是一个开始。