Ausrichtung Elemente Form

[Html-Noob]

Liebe Community

Versuche gerade ein kleines Suchformular zu erstellen mit einem Input-Feld und einem Button:

  
<form id="form">  
  <input id="textfeld"></input>  
  <button id="button"></button>  
</form>  

  
#form{  
margin: 0px;  
padding: 0px;  
border: 0px;  
box-sizing: border-box;  
-webkit-box-sizing: border-box;  
-moz-box-sizing: border-box;  
}  
#textfeld{  
margin: 0px;  
padding: 0px;  
border: 0px;  
box-sizing: border-box;  
-webkit-box-sizing: border-box;  
-moz-box-sizing: border-box;  
height: 30px;  
}  
#button{  
margin: 0px;  
padding: 0px;  
border: 0px;  
box-sizing: border-box;  
-webkit-box-sizing: border-box;  
-moz-box-sizing: border-box;  
width: 30px;  
height: 30px;  
}  

Leider bin ich auf das Problem gestoßen, dass beim IE und Chrome oberhalb und rechts (links button) vom Eingabefeldes ein Rand entsteht, trotz margin, padding und border = 0.
Wie ist es möglich Eingabefeld und Button, beide mit der gleichen Höhe, ohne Lücken zwischen den Elementen und dem Elternelement anzuordnen?

Freundliche Grüsse

[MudGuard]

Hi,

<form id="form">
  <input id="textfeld"></input>
  <button id="button"></button>
</form>

  
input ist ein leeres Element, d.h. es wird mit nur einem Tag geschrieben: <input />  
  

> Leider bin ich auf das Problem gestoßen, dass beim IE und Chrome oberhalb und rechts (links button) vom Eingabefeldes ein Rand entsteht, trotz margin, padding und border = 0.  
  
Der Abstand zwischen den beiden Elementen liegt daran, daß Du whitespace (Zeilenumbruch, Einrückung, ...) zwischen den beiden Elementen hast.  
Dieser wird auf 1 Leerzeichen reduziert und angezeigt.  
  
cu,  
Andreas

-- 
[Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/)  
[O o ostern ...](http://ostereier.andreas-waechter.de/)  
  
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.  

[1UnitedPower]

Hakuna matata!

Leider bin ich auf das Problem gestoßen, dass beim IE und Chrome oberhalb und rechts (links button) vom Eingabefeldes ein Rand entsteht, trotz margin, padding und border = 0.

Der Abstand zwischen den beiden Elementen liegt daran, daß Du whitespace (Zeilenumbruch, Einrückung, ...) zwischen den beiden Elementen hast.
Dieser wird auf 1 Leerzeichen reduziert und angezeigt.

Gibt es dafür eine immersive Lösung nur mit CSS?

[MudGuard]

Hi,

Der Abstand zwischen den beiden Elementen liegt daran, daß Du whitespace (Zeilenumbruch, Einrückung, ...) zwischen den beiden Elementen hast.
Dieser wird auf 1 Leerzeichen reduziert und angezeigt.

Gibt es dafür eine immersive Lösung nur mit CSS?

Mir fällt da höchstens word-spacing mit negativer Länge ein - wobei man dazu wissen müßte, wie breit genau das Leerzeichen ist.
Wobei negative Werte nicht unterstützt werden müssen (Zitat: Values may be negative, but there may be implementation-specific limits. )

cu,
Andreas

[Gunnar Bittersmann]

@@MudGuard:

nuqneH

Mir fällt da höchstens word-spacing mit negativer Länge ein

Pfui.

wobei man dazu wissen müßte, wie breit genau das Leerzeichen ist.

Eben.

Wobei negative Werte nicht unterstützt werden müssen (Zitat: Values may be negative, but there may be implementation-specific limits. )

Das Problem hätte man mit negativem margin nicht. Wohl aber das oben genannte.

Qapla'

[Gunnar Bittersmann]

@@1UnitedPower:

nuqneH

Gibt es dafür eine immersive Lösung nur mit CSS?

Mehrere:
— Floats
— display: table-cell nebst border-collapse: collapse für den table-Container form
— Flexbox

Qapla'

[Gunnar Bittersmann]

@@Html-Noob:

nuqneH

<form id="form">

"form" ist kein guter Bezeichner für ein Formular. Zu allgemein, außerdem wird das bereits durch den Elementtypen form ausgedrückt. Für ein Suchformular könnte "search" oder "search-form" ein guter Bezeichner sein. Wozu braucht das eine ID?

<input id="textfeld"></input>

"textfeld" ist kein guter Bezeichner für ein Eingabefeld. Wozu braucht das eine ID? Aber name sollte es doch haben?

Ein Eingabefeld zur Suche sollte auch nicht vom Typ text, sondern search sein: <input name="search" type="search" />.

Und eine Beschriftung (label) sollte das Feld auch haben, oder?

<button id="button"></button>

"button" ist kein kein guter Bezeichner für einen Button. Wozu braucht der eine ID?

Der Button hat keine Beschriftung, ist damit nicht bedienbar. So wird das was: <button>suchen</button>. Den Text kann man mit CSS visuell gegen eine Grafik tauschen (image replacement).

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Und eine Beschriftung (label) sollte das Feld auch haben, oder?

Nicht Frage-, sondern Ausrufezeichen.

Qapla'

[Felix Riesterer]

Lieber Gunnar Bittersmann,

ich fasse das mal zusammen:

<form id="search-form" action="http://example.org/search" methode="get">  
    <label title="Suchbegriff bitte hier eingeben">  
        <input type="search" name="s" />  
    </label>  
    <input type="submit" value="find!" />  
</form>

Das Beispiel verwendet nur noch eine ID. Das genügt auch, denn mit dem Nachfahren-Selektor in Verbindung mit dem Attribut-Selektor kann man nun jedes Kindelement sicher ansprechen:

#search-form {  
    ...  
}  
  
#search-form label {  
    ...  
}  
  
#search-form input[type=search] {  
    ...  
}  
  
#search-form input[type=submit] {  
    ...  
}

Liebe Grüße,

Felix Riesterer.

[Matthias Apsel]

Om nah hoo pez nyeetz, Felix Riesterer!

ich fasse das mal zusammen:

<form id="search-form" action="http://example.org/search" methode="get">

<label title="Suchbegriff bitte hier eingeben">
        <input type="search" name="s" />
    </label>
    <input type="submit" value="find!" />
</form>

  
besser ~~~html
[link:http://blog.selfhtml.org/2015/02/09/input-oder-button-fuer-submit-elemente/@title=<button>find!</button>]  

Matthias

[Html-Noob]

Liebe Community

Danke für die schnellen und umfangreichen Antworten.

Der Tipp, dass <input> nicht geschlossen werden muss, hat den Zwischenraum oberhalb des Eingabefeldes entfernt.

Den Zwischenraum zwischen Eingabefeld und Button konnte entfernt werden, indem beide Elemente in die selbe Zeile des Quelltextes verschoben wurden.
Warum spielt hier der Zeilenumbruch im Quelltext eine Rolle und sonst nicht?

Danke und freundliche Grüsse

[Felix Riesterer]

Lieber Html-Noob,

Warum spielt hier der Zeilenumbruch im Quelltext eine Rolle und sonst nicht?

weil beide Elemente in einem inline-Kontext stehen. Wenn Du beide auf "display:block" setzt, dann sollte ein anderer Kontext gelten, in dem Du die Positionierung eben auf andere Weise lösen musst.

Liebe Grüße,

Felix Riesterer.