Question

无法在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&#39;s LinkedIn:</span></label><input id="00N400000034IsN" maxlength="255" name="00N400000034IsN" size="20" type="text" /></div><p>
        <div><label><span>Speaker&#39;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 &amp;
Beverage">Food &amp; 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&#39;s">Technical Tutorial: How To&#39;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中创建了一个表单，表单中的项目正在级联，就像有缩进一样。

表格是什么样的：

Answer 1

将以下内容添加到<head>部分的文件中，或者最好添加到您的css包含文件中。

<style>
label {
    display:inline-block;
    width:100px;
}
</style>

然后在每行之间添加<br>或两个。

您可能仍需要稍微大惊小怪才能按照您想要的方式进行操作。有更优雅的方法可以做到这一点，但这是一个开始。

如何删除表单中的神秘缩进？

1 个答案: