Eingaben und Texteingaben in HTML auswählen - Der beste Weg, um die gleiche Breite zu erreichen?

Ich habe eine einfache Form wie diese (nur zur Veranschaulichung) ...

<form>

   <div class="input-row">
      <label>Name</label>
      <input type="text" name="name" />
   </div>

   <div class="input-row">
      <label>Country</label>
      <select name="country">
         <option>Australia</option>
         <option>USA</option>
      </select>
   </div>

</form>

Meine Layoutmethode mit CSS lautet wie folgt ...

form  {
    width: 500px;
}

form .input-row {
    display: block;
    width: 100%;
    height: auto;
    clear: both; 
    overflow: hidden; /* stretch to contain floated children */
    margin-bottom: 10px;
}

form .input-row label {
    display: block;
    float: left;
}

form .input-row input,
form .input-row select {
    display: block;
    width: 50%;
    float: right;
    padding: 2px;
}

Dies alles passt sehr gut zusammen, außer dass mein selectElement (in Firefox sowieso) nicht immer die gleiche Breite wie meine anderen inputElemente hat. Sie ist in der Regel um einige Pixel schmaler.

Ich habe versucht, die Breite auf eine Pixelgröße (z. B. 200px) zu ändern, aber es hat keinen Unterschied gemacht.

Was ist der beste Weg, um diese alle auf die gleiche Breite zu bringen? Ich hoffe, es geht nicht darum, dass ich die select's widtheinzeln einstelle oder sie in Tabellen stelle ...

css xhtml

— Alex
quelle

Kann ich dir ein schmutziges kleines Geheimnis verraten? Ich verwende Tabellen, um meine Formulare zu formatieren. Es ist einfach viel zu einfach. Aber Sssssshh, halten Sie das niedrig.

— Paolo Bergantino

Haben Sie in aller Ernsthaftigkeit versucht, den Rand und das Auffüllen auf 0 zu setzen?

— Paolo Bergantino

Paolo, ich habe es ursprünglich getan (und es war einfach, die Eingaben auf die gleiche Breite zu bringen), aber ich habe mich bemüht, es weniger tabellarisch zu machen, und es ist mir in den letzten 8 Monaten gelungen ... das macht mir nur Kummer.

— Alex

Ich hatte Polsterung (um zwischen den Rändern und dem Text etwas Raum zum Atmen zu geben) und als ich die Polsterung entfernte, war der Unterschied geringer (aber dann ist mein Text hart gegen die Ränder)

— Alex

Oh ich weiss. Ich liebe CSS und stimme offensichtlich seinen Vorstellungen von semantischer Relevanz und dergleichen zu, aber wenn es um Formulare geht, mag ich einfach die Flexibilität und Einfachheit von Tabellen. Wie auch immer, ich bin mir nicht sicher, warum das passiert. Formularfelder sind berüchtigt dafür, wie schmerzhaft es ist, sie so zu gestalten, wie Sie es möchten. Es tut uns leid. :)

— Paolo Bergantino

Antworten:

165

Die Lösung besteht darin, ein Boxmodell für Formularelemente anzugeben, und Browser stimmen in der Regel am meisten überein, wenn Sie Border-Box verwenden:

input, select, textarea {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Es gibt ein normalize.css- Projekt, das solche Tricks zusammenfasst.

— Kornel
quelle

Könnten Sie es versuchen ... haben Sie eine empfohlene Lektüre zu diesem Thema?

— alex

Das hat bei mir funktioniert, genial. Das nervt mich schon seit Ewigkeiten.

— SpliFF

Möglicherweise möchten Sie den Elementen auch eine vertikale Standardausrichtung geben, wenn sie im selben Element enthalten sind.

— Andy

Für IE7 können Sie Box-Sizing-Polyfill verwenden . Fügen Sie einfach *behavior: url(boxsizing.htc);nachbox-sizing: border-box;

— Philipp Michael

Wenn sich jemand anderes am Kopf kratzt und dies mit einer Eingabe vom Typ "Suchen" und nicht mit Text versucht, achten Sie darauf, dass Sie als Ziel input[type="search"]wählen, da dies border-sizing: content-boxin einigen Browsern standardmäßig der Fall ist .

— Adam Grant

Durch Auffüllen wird der Text näher am Rand des Felds angezeigt.

Versuchen Sie, den Rand auf 0px zu setzen, und wenn dies richtig erscheint, spielen Sie damit herum (wie wenn Sie nur den Rand nur links einstellen).

— Luke Schafer
quelle

Ich habe versucht, padding: 0 & margin: 0 mit! Wichtig für die Eingaben, Auswahlen und Eingabezeilen zu verwenden, aber es bündelt sie nur sehr eng. Das Auswahlfeld ist ca. 2px schmaler (was möglicherweise etwas mit dem Rand zu tun hat)

— Alex

Hatte die gleichen Probleme mit Tabellen und Zellen mit 100% Breite, mit einem Textfeld (auch mit einer Breite von 100%), das breiter als die Tabellenzelle war.

Dies löste mein Problem in der CSS:

table td
{
    padding-right: 8px;
}

Nicht die beste Lösung aller Zeiten, da Sie wahrscheinlich zusätzlichen Platz auf der rechten Seite haben. Aber zumindest versteckt es sich nicht mehr!

— Herman Cordes
quelle

Ich bezweifle solche absoluten Größen. Wenn Sie einen anderen Browser, einen anderen Fenstermanager / Windows-Stil verwenden, funktioniert dies wahrscheinlich nicht mehr.

— Stracktracer