Entfernen von horizontaler Bildlaufleiste

Ich versuche, dieses HTML-Formular mit CSS zu codieren, um schöner auszusehen.Entfernen von horizontaler Bildlaufleiste

Ich habe es gut gemacht, aber ich suche gerade diese horizontale Scrollbar zu entfernen, aber ich bin nicht sicher, woher es kam.

Es sollte nicht in 2 Spalten sein, also habe ich es in einem iFrame in Wix platziert und die Breite reduziert, um es zu einer vertikalen Liste von Feldern zu machen, aber die Breite zu erhöhen, hält die Bildlaufleiste dort.

Danke für jede Hilfe! Code unten

Es sieht derzeit wie folgt aus: 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>

Quelle

2017-12-21 James Ellis

Auf der iframe, die es enthält, die Sie könnten versuchen, den Stil hinzuzufügen 'Überlauf-x: hidden' –

@NicholasSmith das ist nur die Tatsache verbergen, dass die Menge der Marge zu' .row hinzugefügt 'bricht das Layout. – jeh

-2

Gerade

overflow-x: hidden;

Einwickeln Element hinzuzufügen. Darüber hinaus überprüfen Sie die Breite des Verpackungselements und die inneren Elemente Polsterung/Rand, so dass Sie verwenden können Überlauf-x

Quelle

2017-12-21 14:56:40 NetPax

Nur als eine FYI - das ist nicht, wie Sie Code-Schnipsel verwenden. –

Dies maskiert nur ein Problem und behebt es nicht. – jeh

Ihre .row hat eine marign: 0 -15px; deshalb wird es 30px breiter als 100%

quickfix: geben Eltern eine Auffüllung: 0 15px;

Quelle

2017-12-21 14:59:46

Hallo, Entschuldigung, ich bin relativ neu, ich weiß nicht, wo ich das finden kann. Wo sollte ich diesen Code platzieren? Ich sehe nirgendwo. –

.row kommt von Bootstrap (_grid.scss) –

mögliche Korrekturen: - fügen Sie den Körper padding: body {padding: 0 15px; } - negativen Rand entfernen: .row {margin: 0; } - Padding zum übergeordneten Element hinzufügen: form {padding: 0 15px; } Wenn Sie nicht auf Bootstraps Grid angewiesen sind, würde ich empfehlen, zu überschreiben. –

Es gibt ein paar Probleme mit der Art, wie Sie dies tun, die Sie angehen müssen.

Zuerst müssen Sie Bootstrap vor Ihrem eigenen CSS laden. Andernfalls haben Sie keine Möglichkeit, das Styling zu überschreiben, das Bootstrap auf Ihre Elemente setzt. Die Reihenfolge, in der Ressourcen geladen werden, ist wichtig. Externe Bibliotheken und Frameworks geben Ihnen eine Grundlage, an der Sie arbeiten können, aber Sie möchten immer, dass Ihr Code das letzte "Sagen" hat, was passiert.

Zweitens ist das Problem mit der horizontalen Bildlauf ist, dass etwas über die Grenzen Ihrer Seite überläuft. @ NetPax's Antwort wird den horizontalen Bildlauf los, aber es schafft Potenzial, Teile Ihrer Elemente auf einigen Breiten "off page" zu haben. In diesem speziellen Fall sind all Ihre <div class="row"> Tags die Grenzen Ihrer Seite. Divs sind Blockelemente und nehmen die volle Breite ein, die sie haben. Die row Klasse von Bootstrap kommt mit einem negativen 15px Rand auf beiden Seiten und soll in Verbindung mit einer anderen ihrer Klassen verwendet werden, der container Klasse, die 15px Polsterung bietet.

So müssen Sie entweder etwas anderes als row verwenden, oder müssen einen container Wrapper um die row Elemente hinzufügen.

Ich habe das in dem Code unten getan, sowie Bootstrap verschieben, um vor Ihrem CSS zu laden. Lass es mich wissen, wenn du irgendwelche Fragen hast.

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

Quelle

2017-12-21 15:12:03

Dies ist großartig! Es hat funktioniert, danke! Ich habe eine letzte Frage. Es sieht jetzt so aus: http://i64.tinypic.com/2up9v6r.png - der obere Rand ist ungleichmäßig aufgefüllt und die Dropdown-Listen sind nicht im Einklang mit anderem Text –

@JamesEllis, das Textausrichtungsproblem liegt an der Tatsache dass du 'padding: px;' in deiner '.a' Klasse hast. Die Auffüllung in der definiert '.inplft', aber das gilt nicht für Ihre