Html-Noob: Ausrichtung Elemente Form

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

  1. 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.  
    
    
    1. 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?

      --
      “All right, then, I'll go to hell.” – Huck Finn
      1. 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

        --
        Warum nennt sich Andreas hier MudGuard?
        O o ostern ...
        Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
        1. @@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'

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      2. @@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'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  2. @@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'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. @@Gunnar Bittersmann:

      nuqneH

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

      Nicht Frage-, sondern Ausrufezeichen.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    2. 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.

      --
      "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
      1. 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

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen schwer und Schwerin.

        1. 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

          1. 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.

            --
            "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)