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：给父填充：0 15px;

Answer 2

您需要解决的方法存在一些问题。

首先，您需要在自己的CSS之前加载Bootstrap。否则，您将无法覆盖Bootstrap在元素上放置的样式。加载资源的顺序很重要。外部库和框架为您提供了工作的基础，但您始终希望您的代码能够拥有最后的“说”。在发生什么。

其次，您对水平滚动的问题是，某些内容溢出了您网页的边界。 @ NetPax的答案将摆脱横向滚动，但它可能会使你的部分元素脱离页面＆＃39;在某些宽度。在这种特定情况下，溢出页面边界的内容都是<div class="row">个标记。 Div是块元素，占据它们的全宽。 Bootstrap中的row类在两侧都带有负15px的余量，并且要与另一个类container类一起使用，它提供15px的填充。

因此，您需要使用row之外的其他内容，或者需要在container元素周围添加row包装。

我已经在下面的代码中完成了这项工作，并在CSS之前移动Bootstrap。如果您有任何问题，请告诉我。

＆＃13;

 /*.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;
    }

＆＃13;

<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="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>

＆＃13;

Answer 3

添加

overflow-x: hidden;

到包装元素。此外检查包装元素宽度和内部元素填充/边距所以可能让你使用overflow-x

从水平滚动条中删除

3 个答案: