我试图用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="[email protected]"> -->
<!-- ---------------------------------------------------------------------- -->
<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>
你的.row有一个保证金：0 -15px;因此它比100％宽30px
quickfix：给父填充：0 15px;
您需要解决的方法有两个问题。
首先，您需要在自己的CSS之前加载Bootstrap。否则，您将无法覆盖Bootstrap在元素上放置的样式。加载资源的顺序很重要。外部库和框架为您提供了工作的基础，但您总是希望您的代码在发生的事情中拥有最后的“发言权”。
第二，你对水平滚动的问题是，某些东西溢出了你的页面边界。 @ NetPax的答案将摆脱水平滚动，但它可能会使你的元素部分“离页”在某些宽度。在这种特殊情况下，溢出页面边界的东西都是你的<div class="row">标签。 Div是块元素，占据它们的全宽。来自Bootstrap的row类在两侧都带有负15px的余量，并且可以与他们的另一个类container类一起使用，它提供15px的填充。
所以你需要使用除row之外的东西，或者需要在container元素周围添加一个row包装器。
我已经在下面的代码中完成了这一点，并在CSS之前移动Bootstrap加载。如果您有任何疑问，请告诉我。
/*.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;
}<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="[email protected]"> -->
<!-- ---------------------------------------------------------------------- -->
<div class="container">
<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>
</div>
</form>只需添加
overflow-x: hidden;
包装元素。此外，检查包装元素宽度和内部元素填充/边距，这样可能让你使用overflow-x