html - 从水平滚动条中移除

Question

我正在尝试使用 CSS 编写此 HTML 表单以使其看起来更漂亮。

我做得很好，但我想删除这个水平滚动条，但我不确定它是从哪里来的。

它不应该在 2 列中，所以我将它放在 Wix 的 iFrame 中并减小了宽度以使其成为垂直的字段列表，但增加宽度使滚动条保持在那里。

感谢您的帮助!代码如下

目前看起来像这样:Screenshot

<META HTTPS-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">

<!--  ----------------------------------------------------------------------  -->
<!--  NOTE: Please add the following <FORM> element to your page.             -->
<!--  ----------------------------------------------------------------------  -->
<style>
    /*.inpcls{
        border-radius: 0;
    font: normal normal normal 14px/1.4em avenir-lt-w01_35-light1475496,sans-serif;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgba(255, 255, 255, 0.95);
    box-sizing: border-box !important;
    color: #000000;
    border: 2px solid rgba(145, 145, 145, 1);
    padding: 3px;
    margin: 0;
    max-width: 100%;
    min-width: 100%;
    min-height: 100%;
    text-overflow: ellipsis;
    }*/
    .inplft{
        padding-left: 14px;
        font: normal normal normal 14px/1.4em avenir-lt-w01_35-light1475496,sans-serif;
    }
    .inprht{
        padding-right: 0px;
        font: normal normal normal px/1.4em avenir-lt-w01_35-light1475496,sans-serif;
    }
    .div1{
        /*left: 119px;*/
    width: 350px;
    position: absolute;
    /*top: 264px;*/
    /*height: 379px;*/
    }
    .d2{
            /*left: 58px;*/
    position: absolute;
    /*top: 23px;*/
    height: 42px;
    width: 30px;
    }
    .mrglft{
       margin-left: -%;
    }
    .a{
        border-radius: 0;
    font: normal normal normal 14px/1.4em avenir-lt-w01_35-light1475496,sans-serif;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgba(255, 255, 255, 0.95);
    box-sizing: border-box !important;
    color: #000000;
    border: 2px solid rgba(145, 145, 145, 1);
    padding: px;
    margin-top: 2%;
    height: 42px;
    width: 302px;
    text-overflow: ellipsis;
    }
</style>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" >
<!-- <div class="div1"> -->
<form action="https://test.example.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">

<input type=hidden name="oid" value="00D5E0000000UJe">
<input type=hidden name="retURL" value="https://example.com/">

<!--  ----------------------------------------------------------------------  -->
<!--  NOTE: These fields are optional debugging elements. Please uncomment    -->
<!--  these lines if you wish to test in debug mode.                          -->
<!--  <input type="hidden" name="debug" value=1>                              -->
<!--  <input type="hidden" name="debugEmail"                                  -->
<!--  value="kasper.martlev@weare4c.com">                                     -->
<!--  ----------------------------------------------------------------------  -->

<div class="row">
    <div class="col-md-3" >
    <input class="inplft a" id="first_name" maxlength="40" name="first_name" size="20" type="text" placeholder="Name" required=true/>
    </div>
    <div class="col-md-3" >
    <input class="inplft a mrglft" id="00N5E000000rknN" name="00N5E000000rknN" size="12" placeholder="Date of Birth" type="text" /></span><br>
    </div>
</div>

<div class="row">
     <div class="col-md-3" >
    <input class="inplft a" id="email" maxlength="80" name="email" size="20" type="text" placeholder="Email Address" required=true />
</div>
 <div class="col-md-3" >
    <input class="inplft a mrglft" id="mobile" maxlength="40" name="mobile" size="20" placeholder="Telephone Number" type="text" required=true/><br>
</div>
</div>

<div class="row">
     <div class="col-md-3" >
<input class="inplft a" id="city" maxlength="40" name="city" size="20" type="text" placeholder="Town or City" />
    </div>
     <div class="col-md-3" >
<select class="inprht a mrglft" id="country_code" name="country_code" >
<option value disabled selected style="display: none;" >Country</option>
<option value="BH">Bahrain</option>
<option value="EG">Egypt</option>
<option value="JO">Jordan</option>
<option value="KW">Kuwait</option>
<option value="LB">Lebanon</option>
<option value="MA">Morocco</option>
<option value="OM">Oman</option>
<option value="OTHER">Other</option>
<option value="QA">Qatar</option>
<option value="SA">Saudi Arabia</option>
<option value="CH">Switzerland</option>
<option value="SYR">Syria</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
</select><br>
    </div>
</div>

<div class="row">
     <div class="col-md-3" >
<input class="inplft a" id="00N5E000000rwVf" maxlength="100" name="00N5E000000rwVf" size="20" type="text" placeholder="Current School/University" />
</div>
 <div class="col-md-3" >
<input class="inplft a mrglft" id="00N5E000000rkdr" maxlength="255" name="00N5E000000rkdr" size="20" type="text" placeholder="Desired Course" /><br>
</div>
</div>

<div class="row">
     <div class="col-md-1" ></div>
     <div class="col-md-3" >
<select class="inprht a" id="lead_source" name="lead_source" >
<option value disabled selected style="display: none;" >How did you hear about us?</option>
<option value="Ahmed Al-Ajmi">Ahmed Al-Ajmi</option>
<option value="British Council">British Council</option>
<option value="Career day">Career day</option>
<option value="Deferred">Deferred</option>
<option value="Egypt_School_Tour">Egypt_School_Tour</option>
<option value="Facebook">Facebook</option>
<option value="Fair Alexandria">Fair Alexandria</option>
<option value="Fair Cairo">Fair Cairo</option>
<option value="Fair Lebanon">Fair Lebanon</option>
<option value="Flier / Poster">Flier / Poster</option>
<option value="Google">Google</option>
<option value="GSUK Alumni">GSUK Alumni</option>
<option value="GSUK_Website">GSUK_Website</option>
<option value="Gulf Tour">Gulf Tour</option>
<option value="Hamra Walk-In">Hamra Walk-In</option>
<option value="Info Session Bahrain">Info Session Bahrain</option>
<option value="Info Session Kuwait">Info Session Kuwait</option>
<option value="Info Session Oman">Info Session Oman</option>
<option value="Info Session Qatar">Info Session Qatar</option>
<option value="Info Session UAE">Info Session UAE</option>
<option value="Instagram">Instagram</option>
<option value="Kuwait Fair">Kuwait Fair</option>
<option value="Lebanon_School_Tour">Lebanon_School_Tour</option>
<option value="Morocco School Tour">Morocco School Tour</option>
<option value="Other_(Please specify)">Other_(Please specify)</option>
<option value="Referral_(Please specify)">Referral_(Please specify)</option>
<option value="School Counsellor_(Please specify)">School Counsellor_(Please specify)</option>
<option value="School Presentation">School Presentation</option>
<option value="School Tour">School Tour</option>
<option value="Twitter">Twitter</option>
<option value="University Website_(Please specify)">University Website_(Please specify)</option>
<option value="Web">Web</option>
</select><br>
</div>
</div>

<div class="row">
     <div class="col-md-1" ></div>
     <div class="col-md-3" >
<input class="inprht a" type="submit" name="submit">
</div>
</div>

</form>

Answer 1

你的 .row 有一个 marign: 0 -15px;因此它比 100% 宽 30px

quickfix: 给父级 padding: 0 15px;