24 Stimmen

Wie reiht man HTML-Eingabeelemente aneinander?

Ich hoffe, eine Ressource für die Anordnung von Eingabeelementen in einer HTML-Seite zu finden. Ich finde es schwierig, ein Auswahlelement und ein Textfeld auf die gleiche Breite zu bringen, selbst wenn ich das Stilattribut width verwende, und in verschiedenen Browsern ist es sogar noch schwieriger. Schließlich scheint es unmöglich zu sein, Dateieingaben browserübergreifend auf dieselbe Breite zu bringen. Gibt es irgendwelche guten Anleitungen oder Tipps, wie man dies erreichen kann? Vielleicht gibt es einige Standard-CSS-Attribute, die ich einstellen sollte.

0voto

mmacaulay Punkte 2991

Dateieingaben können sich in den verschiedenen Browsern grundlegend unterscheiden und lassen definitiv nicht viele Anpassungen zu, was ärgerlich sein kann, aber ich verstehe auch, warum das aus einer Sicherheitsperspektive so ist. Versuchen Sie zum Beispiel, den Text der Schaltfläche "Durchsuchen" zu ändern, die in den meisten Browsern angezeigt wird, oder vergleichen Sie die Dateieingabe in Safari mit der in anderen Browsern...

0voto

AlfaTeK Punkte 6949

Ich glaube nicht, dass Ron's 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 px breiter ist als die Auswahl (dies ist wahrscheinlich OS-abhängig). Ich bin nicht sicher, ob dies erreicht werden könnte, auch mit dem +5px-Trick, wie das Styling des Select scheint OS (zumindest Windows-Thema) abhängig zu sein.

0voto

Slawa Punkte 1037

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

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

-6 Pixel funktioniert bei mir am besten (FF9), nach Belieben bearbeiten.

0voto

Jim Punkte 1033

Das liegt daran, dass bei einem <input> der Rahmen und das Padding zur Breite hinzugefügt werden (wie bei den meisten anderen Elementen). Bei einem <select> wird der Rahmen und das Padding in die Breite einbezogen, genau wie im alten IE-Quirks-Modus.

Sie können dies umgehen, indem Sie die Breite erhöhen, um diesem Umstand Rechnung zu tragen:

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) können Sie die neue CSS3-Eigenschaft "box-sizing" verwenden, um ein konsistentes Verhalten zu erreichen, und Polsterung 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 box-sizing auf border-box setzen, damit sich die Eingaben wie die Selects verhalten, mit Padding innerhalb der Breite der Box.

Getestet in Chrome, IE8, FF

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X