• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Input Felder mit 100% Breite umsetzen

B

blabla333

Mitglied
Hallo,

ich möchte ein Input-Feld mit einer Breite von 100% einsetzen:

HTML: 
<html lang="de">
<head>
</head>
<body>
    <div style="width: 50%; height: 60px; background-color: gray; padding: 10px;">
    <form>
        <formfield>
            <input type=text style="width:100%; display: block;z-index:2;height:40px;padding: 5px 50px 5px 20px">
            <input type=button style="width:30px;height:40px;float: right; margin-top: -40px; display: block; z-index:1;">
        </formfield>
    </form>
</div>
</body>
</html>

Soweit funktioniert das ja auch. Allerdings verzieht sich alles sobald ich im Dokument
HTML: 
<!DOCTYPE html>
angebe.

Kann mir das jemand erklären?
 
Bei gültigem Doctype (den man verwenden sollte) wird zur angegebenen Breite das angegebene padding addiert. Dein input hat somit die Breite 100% + 50px + 20px. Lass mal die Breitenangabe weg und ergänze "display: block;".

Abgesehen davon gibt es das HTML-Element formfield nicht. Ich vermute du meinst eigentlich fieldset. Valider HTML-Code ist für die Darstellung sehr wichtig.

Moderation: Verschoben von HTML zu CSS, da es um Gestaltung geht.
 
Danke für die Info.

Die Breitenangabe kann ich nicht weglassen, da sie bei meinem Design benötigt wird. Ich werde wohl box-sizing einsetzen müssen.

Wie gesagt, ich wusste nicht woran es genau liegt. Jetzt verstehe ich es. Sorry, dass ich hierfür einen neuen Thread in der Kategorie HTML eröffnet habe, ich dachte es wäre ein HTML-Problem.

Bei nur einem Element, kann man doch <fieldset> weglassen, oder?
 
<fieldset> soll Formularabschnitte semantisch trennen, so dass man sie (nebenbei) auch entsprechend gestalten kann. Wenn Du nur ein Formularfeld hast, kannst Du es schon weglassen, es sei denn Du brauchst es für die Gestaltung.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben