it-swarm.com.de

Wie werden HTML-Eingabeelemente ausgerichtet?

Ich hoffe, eine Ressource zu finden, mit der sich Eingabeelemente in einer HTML-Seite anordnen lassen. Ich finde es schwierig, ein ausgewähltes Element und ein Textfeld auf dieselbe Breite zu bringen, selbst wenn das Attribut width style verwendet wird, und es ist für alle Browser noch schwieriger. Schließlich scheinen Dateieingaben nicht in der Lage zu sein, den Cross-Browser mit der gleichen Breite zu erreichen. Gibt es dafür gute Anleitungen oder Tipps? Vielleicht gibt es einige Standard-CSS-Attribute, die ich einstellen sollte.

24
Greg

Ich habe dies in Internet Explorer 7, Firefox 3 und Safari/Google Chrome getestet. Ich sehe definitiv das Problem mit <select> und <input type="file">. Meine Ergebnisse zeigten, dass der <select> in allen Browsern um etwa 5 Pixel kürzer wäre, wenn Sie alle Eingaben auf die gleiche Breite gestylt hätten.

Die Verwendung des Eric Meyer CSS-Rücksetzskripts hilft bei diesem Problem nicht. Wenn Sie jedoch einfach den <select> um 5 Pixel verbreitern, erhalten Sie in den wichtigsten Browsern eine sehr gute (wenn auch nicht perfekte) Ausrichtung. Der einzige Unterschied ist Safari/Google Chrome. Er scheint 1 oder 2 Pixel breiter zu sein als alle anderen Browser.

Was den <input type="file"> angeht, haben Sie dort nicht viel Flexibilität beim Styling. Wenn JavaScript eine Option für Sie ist, können Sie die Methode implementieren, die auf quirksmode angezeigt wird , um eine bessere Kontrolle über das Design des Steuerelements für das Hochladen von Dateien zu erhalten.

Das vollständige Arbeitsbeispiel in XHTML 1.0 Strict enthält ein typisches Formular mit konsistenten Eingabebreiten. Beachten Sie, dass hierbei nicht der von anderen hier erwähnte 100% -Breiten-Trick verwendet wird, da das gleiche Problem bei inkonsistenten Breiten auftritt. Darüber hinaus werden keine Tabellen zum Rendern des Formulars verwendet, da Tabellen nur für Tabellendaten und nicht für das Layout verwendet werden sollten.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Example Form</title>
  <style type="text/css">
    label, input, select, textarea {
        display: block;
        width: 200px;
        float: left;
        margin-bottom: 1em;
    }

    select {
        width: 205px;
    }

    label {
        text-align: right;
        width: 100px;
        padding-right: 2em;
    }

    .clear {
      clear: both;
    }
  </style>
</head>
<body>
  <form action="#">
    <fieldset>
      <legend>User Profile</legend>
      <label for="fname">First Name</label>
      <input id="fname" name="fname" type="text" />
      <br class="clear" />

      <label for="lname">Last Name</label>
      <input id="lname" name="lname" type="text" />
      <br class="clear" />

      <label for="fav_lang">Favorite Language</label>
      <select id="fav_lang" name="fav_lang">
        <option value="c#">C#</option>
        <option value="Java">Java</option>
        <option value="Ruby">Ruby</option>
        <option value="python">Python</option>
        <option value="Perl">Perl</option>
      </select>
      <br class="clear" />

      <label for="bio">Biography</label>
      <textarea id="bio" name="bio" cols="14" rows="4"></textarea>
      <br class="clear" />
    </fieldset>
  </form>
</body>
</html>
17
cowgod

Normalerweise lege ich sie in eine Div- oder Tabellenzelle (Horror! Ich weiß) der gewünschten Breite und setze dann den Auswahl- und Eingabestil: width auf 100%, damit sie die Div-/Zelle ausfüllen, in der sie sich befinden.

13
Ron Savage

Ich fand, dass, wenn Sie select und input element border und padding auf 0 setzen, sie die gleiche Breite haben. (Getestet unter Chrome 14, Firefox 7.0.1, Opera 11.51, IE 9)

Durch das Einfügen eines Randes/Auffüllens von 1 Pixel in Auswahl- und Eingabeelemente wird das Eingabeelement um 2 Pixel breiter. Zum Beispiel:

<form class="style">
    <input name="someInput" />
    <select name="options">
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
    </select>
</form>

.style select {
    width: 100px;
    padding: 1px;
    border: 1px solid black;
}
.style input {
    width: 96px; /* -2 px for 1px padding(1px from each side) and -2px for border
    (select element seems to put border inside, not outside?) */
    padding: 1px;
    border: 1px solid black;
}
2
Dalius

Abgesehen von der Breite würde ich auch den Rand und den Rand festlegen. Diese können Ihre Steuerelemente beeinflussen oder nicht. So etwas kann helfen:

input, select {
    width: 100px;
    margin: 0px;
    border: 1px solid;
}

Ron hat auch eine gute Idee.

1

Dies liegt daran, dass bei einer <Eingabe> der Rahmen und der Abstand zur Breite hinzugefügt werden (wie bei den meisten anderen Elementen). Mit einem <select> wird der Rand und die Polsterung in die Breite einbezogen, genau wie im alten IE Macken-Modus.

Sie können dies umgehen, indem Sie die Breite erhöhen, um dies zu berücksichtigen:

input  { width: 200px; padding: 10px; border-width:5px; }
select { width: 230px; padding: 10px; border-width:5px; }

Oder (wenn Sie sich auf die Browserunterstützung verlassen können) Sie können die neue CSS3-Box-Sizing-Eigenschaft verwenden, um ein konsistentes Verhalten zu erzielen, und Auffüllungen und Rahmen außerhalb der Elementbreite zeichnen:

input, select {
  width: 200px;
  padding: 10px;
  border-width:5px;
  -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: content-box;    /* Firefox, other Gecko */
  box-sizing: content-box;         /* Opera/IE 8+ */
}

Alternativ können Sie die Box-Größe auf Border-Box setzen, damit sich die Eingaben wie die Auswahl verhalten, wobei der Abstand innerhalb der Breite der Box gezeichnet wird.

Getestet in Chrome, IE8, FF

0
Jim

Wenn Sie dringend brauchen {Breite: 100%; } und nicht mit Breiten in Pixel angegeben, dann ist jQuery dein Freund:

$(function () {
    var allSelects = $('input[type="text"], textarea');
    allSelects.css('width', (allSelects.width()-6)+'px');
}

-6 Pixel funktioniert am besten für mich (FF9), nach Belieben bearbeiten.

0
Slawa

Ich glaube nicht, dass Rons Idee funktioniert ...

testfall:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <link href="styles/reset.css" rel="stylesheet" type="text/css"/>

    <style type="text/css">
        input, select{
            width: 100%;
        }
    </style>
</head>
<body>

<div style="width: 200px;">
    <input type="text">
    <select>
        <option>asdasd</option>
        <option>asdasd</option>
    </select>

</div>

</body>
</html>

Dies führt dazu, dass die Eingabe einige Pixel breiter als die Auswahl ist (dies ist wahrscheinlich vom Betriebssystem abhängig). Ich bin mir nicht sicher, ob dies auch mit dem + 5px-Trick erreicht werden kann, da das Styling der Auswahl anscheinend vom Betriebssystem (zumindest Windows-Thema) abhängt.

0
AlfaTeK

Dateieingaben können sich von Browser zu Browser grundlegend unterscheiden und erlauben auf keinen Fall viele Anpassungen, was ärgerlich sein kann, aber ich verstehe auch, warum dies aus Sicherheitsgründen so ist. Ändern Sie beispielsweise den Text der Schaltfläche "Durchsuchen", die in den meisten Browsern angezeigt wird, oder vergleichen Sie die Dateieingabe in Safari mit anderen Browsern ...

0
mmacaulay

Starten Sie Ihre CSS-Dateien mit einigen Grundeinstellungen? Es kann nützlich sein, das Auffüllen und den Rand für alle Elemente zu deaktivieren. Ich habe nicht getestet, ob dies Auswirkung auf ausgewählte/eingegebene Elemente haben könnte.

Hier ist ein Beispiel für einen CSS-Reset von Eric Meyer:

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

0
Dave Rutledge