Lücke zwischen input-type-text-und Eingabe-Taste

krank zeigen ihn als Bild wieder 🙂
Lücke zwischen input-type-text-und Eingabe-Taste

Entwerfe ich ein Suchfeld, aber ich habe vor seltsamen Fehler..
Mein Ziel ist Eingabefeld und die Schaltfläche Einstellungen, um zu sehen, wie eine.
Also ich habe gestylt, Sie mit Grenzen. Wäre es OK, wenn es nur wäre nicht eine Lücke zwischen diesen beiden Elementen.. Und auch button 2px kleiner als Eingabefeld.
Hier ist meine css -

form#search
{
}
input[type=text]
{
  width: 400px;
  border-top: 1px solid rgb(217, 217, 217);
  border-right: none;
  border-bottom: 1px solid rgb(217, 217, 217);
  border-left: 1px solid rgb(217, 217, 217);
  height: 50px;
}
input[type=button]
{
  font-family: 'WebSymbolsRegular';
  width: 40px;
  border-top: 1px solid rgb(217, 217, 217);
  border-right: 1px solid rgb(217, 217, 217);
  border-bottom: 1px solid rgb(217, 217, 217);
  border-left: none;
  background: white;
  height: 50px;
}
input[type=submit]
{
  font-family: 'WebSymbolsRegular';
  height: 50px;
}

Und hier ist html, auf Wunsch sachleen. Nichts besonderes hier..

<form id="search">
    <input type="text" name="search" placeholder="search" tabindex="1"/>
    <input type="button" value="S" tabindex="3"/>
    <input type="submit" value="L" tabindex="2"/>
</form>

Habe ich nicht gemacht, keine Regeln, um diese Lücken. Hinzufügen von margin oder padding : 0, es ändert sich nichts.
Ich bin auch mit Eric Meyer ' s "Reset CSS" 2.0 reset css.

HTML bitte... gibt es irgendeinen Raum zwischen den Elementen? Dies umfasst die beiden Dinge auf eine neue Zeile in den HTML-Code.

InformationsquelleAutor Wish | 2012-11-13

css

3

Dieser arbeitete für mich
```
form {
  border: 1px solid rgb(217, 217, 217);
  width: 598px;
  background: green;
  font-size:0;  

  input {
    padding: 0px;
    border: 0px;
    font-size:18px; 
    height: 30px;
    background: white; 
  }
  input[type='text'] {
    width: 498px;
  }
  input[type='button'], input[type='submit'] {
    width: 50px;
  }
}
```
Gefunden, die ultimative Lösung eignet sich auch! Und funktioniert auf allen Browsern identisch ist. Schlüssel - font-size: 0 auf die Eltern ontainer (Formular in diesem Fall), Einstellung Polster auf 0px und die gleichen Höhen für alle Eingänge. Ich-form Breite 598 (+2 * 1px border), und ich kann festlegen, Eingabe-Breite Summe 598. Jetzt ich nicht verwenden müssen, schickes display: box-und float: left alles zu brechen.

InformationsquelleAutor Wish
0

Sie versuchen, Zusammenführen von zwei verschiedenen input-Typen in einem einzigen, text und button. Sie haben es sich anders und benutzerdefinierte Eigenschaften, so dass layout-Probleme sicher zu entstehen. Dieser sagte können Sie die Randeinstellungen auf Ihre Taste, um Sie einzustellen aber es ist nicht cross-browser kompatibel.

InformationsquelleAutor defau1t
0

Haben einige Betrug(gab Sie die Taste 2px extra), aber diese eher funktioniert, außer für jene, die Bilder für Einstellungen/Suche:

http://jsfiddle.net/JLuyL/

Ist der Schlüssel in der display - Eigenschaft in CSS.

InformationsquelleAutor Vinod Vishwanath
0

Waren Sie über ihn denkt!
```
<form id="search">
    <input type="text" name="search" placeholder="search" tabindex="1"/><input type="button" value="S" tabindex="3"/><input type="submit" value="L" tabindex="2"/>
</form>
```
Inline-Elementen finden Sie unter Leerzeichen im code. Die oben entfernt die Leerzeichen, ganz wörtlich.

Weitere Infos finden Sie hier: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

InformationsquelleAutor Nathan Hornby

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.