文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >从水平滚动条中删除

问从水平滚动条中删除
EN

Stack Overflow用户
提问于 2017-12-21 22:49:42
回答 3查看 95关注 0票数 1

我正在尝试用CSS编码这个HTML表单，让它看起来更好。

我已经做得很好，但我只是希望删除这个水平滚动条，但我不确定它来自哪里。

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

谢谢你的帮助！下面的代码

它目前看起来是这样的：Screenshot

代码语言：javascript
复制
<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>
html
css
forms
EN

回答 3

Stack Overflow用户

发布于 2017-12-21 22:59:46

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

快速修复:给父母一个填充:0 15px；

票数 1
EN

Stack Overflow用户

发布于 2017-12-21 23:12:03

你做这件事的方式有几个问题需要解决。

首先，你需要在你自己的CSS之前加载Bootstrap。否则，您将无法覆盖Bootstrap放置在元素上的样式。加载资源的顺序很重要。外部库和框架为你的工作提供了基础，但你总是希望你的代码对发生的事情拥有最后的‘发言权’。

第二，水平滚动的问题是有些东西溢出了页面的边界。@NetPax的答案将去掉水平滚动，但它可能会使元素的某些部分以一定的宽度“离开页面”。在这种情况下，溢出页面边界的是所有的<div class="row">标记。Div是块元素，占据了给定的全部宽度。Bootstrap中的row类两边都有15px的负边距，并打算与它们的另一个类container类一起使用，后者提供了15px的填充。

因此，您需要使用row之外的其他东西，或者需要在row元素周围添加一个container包装器。

我已经在下面的代码中做到了这一点，以及在你的CSS之前移动Bootstrap加载。如果你有任何问题，请告诉我。

​

代码语言：javascript
复制
 /*.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;
    }
代码语言：javascript
复制
<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>

​

票数 0
EN

Stack Overflow用户

发布于 2017-12-21 22:56:41

只需添加

代码语言：javascript
复制
overflow-x: hidden;

到包装元素。此外，检查包装元素宽度和内部元素填充/边距，这样可能会让您使用overflow-x

票数 -2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/47927427

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档