100% breite Inputs und selects

Status
Nicht offen für weitere Antworten.
G

Geflügel

Erfahrenes Mitglied
Hallo,

Wie gestaltet man 100% breite Inputs und Selectboxen?
Wenn ich style="width: 100%;" anwende, dann funktioniert es in einem normalen <div> zwar, aber wenn dass <div>-Element die Eigenschaft: "padding: 50px;" hat, dann wird dann geht das Edit-Element bzw. Select-Element darüber hinaus. :confused: Kann man das verhindern? Danke im Voraus!
 
Hi,

das von dir geschilderte Problem kann ich bei mir nicht reproduzieren:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_Geflügel</title>

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
div {
padding:50px;
}
input,select {
width:100%;
background:red;
}
-->
</style>

</head>
<body>

<form>
      <div>
           <input type="text">
      </div>
      <div>
           <select size="1">
                   <option>bla</option>
                   <option>blubb</option>
           </select>
      </div>
</form>

</body>
</html>
 
Sry,

war gerade wohl etwas verpeilt!! Entschuldige bitte, bitte. :-)

Wenn man dem Select, bzw. dem Input einen Padding verpasst, dann haut das mit der 100%-Breitenangabe nicht mehr hin.

Also, wenn man dein Beispiel oben ändert zu
Code: 
input,select {
width:100%;
background:red;
padding: 50px;
}

dann siehst du was ich meine. Hast du eine Idee? Danke im Voraus und nochmal Entschuldigung! ;-)
 
Sagt dir das Boxmodell etwas?

Demnach wird u.a. der Innenabstand zur Breite eines Elements hinzugezählt.

Somit müsstest du 100px von 100% subtrahieren, um die gewünschte 100%-Breite zu erzielen, und das funktioniert genau so gut (perfekt), wie Äpfel von Birnen abzuziehen. :suspekt:
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück