Padding innerhalb von Eingängen bricht Breite 100%

Question

Ok, so wissen wir, dass das Festlegen der Auffüllung auf ein Objekt seine Breite ändert, auch wenn es explizit festgelegt ist. Während man die Logik dahinter argumentieren kann, verursacht es einige Probleme mit einigen Elementen.

In den meisten Fällen fügen Sie einfach ein untergeordnetes Element hinzu und fügen anstelle dieses auf 100% hinzu, aber für Formulareingaben ist das kein möglicher Schritt.

einen Blick auf diese: http://sandman.net/test/formcss.html

Der zweite Eingang seiner Polsterung 5px, die ich sehr viel lieber auf die Standardeinstellung gesetzt hat. Aber das lässt die Eingabe in alle Richtungen um 10px wachsen, einschließlich 10px zur 100% Breite.

Problem hier ist, dass ich ein Kindelement innerhalb der Eingabe nicht hinzufügen kann, damit ich es nicht beheben kann. Die Frage ist also:

Gibt es eine Möglichkeit, Padding innerhalb der Eingabe hinzuzufügen, während immer noch die Breite 100%? Es muss 100% sein, da die Formulare in Eltern mit unterschiedlicher Breite dargestellt werden, so dass ich die Breite des Elternteils vorher nicht kenne.

Answer 1

Ich weiß nicht, wie Cross-Browser-kompatibel ist (es funktioniert in Firefox und Safari), aber man konnte diese Lösung versuchen:

DIV.formvalue { 
padding: 15px; 
} 
input.input { 
margin: -5px; 
} 

(Nur die Werte geschrieben, die ich geändert)

Answer 2

Nur was ich weiß, um dies zu verhindern, ist, Werte wie diese 100% -10 zuzuweisen. Aber es hat einige Kompatibilitätsprobleme tho.

Answer 3

Vielleicht nehmen Sie den Rand + Hintergrund von der input, und schließen Sie es stattdessen in eine div mit Rahmen + Hintergrund und Breite: 100%, und setzen Sie einen Rand auf die input?

Answer 4

Eine Option besteht darin, die INPUT in eine DIV zu verpacken, die das Padding hat.

CSS:

div.formvalue { 
    background-color: #eee; 
    border: 1px solid red; 
    padding: 10px; 
    margin: 0px; 
} 

div.paddedInput { 
    padding: 5px; 
    border: 1px solid black; 
    background-color: white; 
} 

div.paddedInput input { 
    border: 0px; 
    width: 100%; 
} 

HTML:

<div class="formvalue"> 
    <div class="paddedInput"><input type="text" value="Padded!" /></div> 
</div> 

Answer 5

Ich habe mit so etwas wie dies einige Fragen. Ich habe tds mit Eingaben von 100% und einer kleinen Polsterung. Was ich tat, war für die Polsterung am td kompensiert wie folgt:

.form td { 
    padding-right:8px; 
} 

.form input, .form textarea { 
    border: 1px solid black; 
    padding:3px; 
    width:100%; 
} 

Polsterung von 8px an die Grenze und Polsterung der Ein-/TextArea- umfassen. Hoffe, das hilft!

Answer 6

Eine Lösung, die ich gefunden habe, ist die absolute Positionierung der Eingabe mit einem relativ positionierten Eltern-Tag.

<p class="full-width-input"> 
    <input type="text" class="text /> 
</p> 

Die den Stil anwenden:

p.full-width-input { 
    position: relative; 
    height: 35px; 
} 

p.full-width-input input.text { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    padding: 5px; 
} 

Das einzige, was zu beachten ist, dass der Absatz-Tag eine Höhe muss Einstellung als absolut positioniert Kinder nicht seine Höhe erweitern. Auf diese Weise müssen Sie width: 100% nicht festlegen, indem Sie sie an der linken und rechten Seite des übergeordneten Elements sperren.

Answer 7

CSS3 verwenden können Sie die Eigenschaft Box-Sizing ändern verwenden, wie der Browser die mit dem Eingang berechnet.

input.input { 
    width: 100%; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
    } 

können Sie hier mehr darüber lesen: http://css-tricks.com/box-sizing/

Answer 8

Versuchen Prozentsätze für die Polsterung mit:

.input { 

    // remove border completely 
    border: none; 

    // don't forget to use the browser prefixes 
    box-shadow: 0 0 0 1px silver; 

    // Use PERCENTAGES for at least the horizontal padding 
    padding: 5%; 

    // 100% - (2 * 5%) 
    width: 90%; 

} 

Wenn Sie über Benutzer auf alten Browsern besorgt sind, die die nicht sehen können box-shadow, gib der Eingabe einfach eine subtile Hintergrundfarbe als Backup. Wenn du Pixel für diese Art von Dingen verwendest, sind die Chancen groß, dass du sie an anderer Stelle verwendest, was ein paar zusätzliche Herausforderungen darstellen könnte, lass es mich wissen, wenn du ihnen begegnest.

Answer 9

der oft vergessenen calc kann hier zur Rettung kommen:

input { 
    width: calc(100% - 1em); 
    padding: 0.5em; 
} 

Da wir die Polsterung wissen auf die Breite des Elements hinzufügen, werden wir einfach die Polsterung von der Gesamtbreite abzuziehen. Es wird von allen gängigen Browsern unterstützt, ist reaktionsschnell und benötigt keine unordentlichen Wrapperdivs.