CSS Grid - Eingabe nicht respektieren Polsterung

Ich finde, dass CSS Grid Layout, dass inputs sind nicht respektieren rechte Seite Polsterung ihrer enthaltenden Element. Insbesondere scheint das grid-template-colums css-Attribut der Schuldige zu sein.CSS Grid - Eingabe nicht respektieren Polsterung

Ich habe festgestellt, dass dieses Problem, CSS Grid Layout beiseite, wurde durch die Anwendung von box-sizing: border-box gelöst. Obwohl ich selbst mit dieser Anwendung und einem CSS-Reset noch nicht in der Lage bin, das Problem zu umgehen. Hier

ist ein gekürzter Code-Schnipsel des Verhaltens von meiner Reaktion App:

http://www.webpackbin.com/VJ8DS5kOz

Hier ist ein Beispiel mit nur Vanille HTML + CSS:

https://repl.it/F75i

I Ich benutze auch Styled Components zum Stylen in meiner React App, von der ich mir ziemlich sicher bin, dass sie nicht zu diesem Verhalten beiträgt, da der Vanille-CSS-Test oben steht.

Quelle

2017-02-05 Jadam

Wenn ich Sie richtig verstehe, denke ich, Marge ist was Sie wollen. Und ich sehe nicht, dass Sie es auf die Eingabefelder angewendet haben. Ich fügte der CSS Datei die folgende Zeile hinzu. Macht das, wonach Sie gesucht haben?

input { margin: 5px; }

Quelle

2017-02-05 05:23:36 Jay

Ich glaube nicht, Marge ist, was ich hier suchen und wenn ich die obige Zeile hinzugefügt habe ich immer noch eine Vorspannung auf der linken Seite im Abstand zu den Eingängen. – Jadam

können Sie einfach Marge auf der rechten Seite hinzufügen, wenn das alles ist, was Sie suchen. Rand rechts: 5px; – Jay

einige meiner Formelemente überspannen die volle Breite und einige nur die Hälfte. Also diejenigen, die die Hälfte überspannen, würden extra breite Regenrinnen bekommen. Ich bekomme CSS Grid nicht vollständig ausgearbeitet, also sind Hacks notwendig. Obwohl das Ziel darin besteht, ein kürzeres und mustergerechteres Verfahren zu finden, um das Problem zu lösen, so dass ich nicht jedem Formularelement eigene Klassen hinzufügen muss, anstatt nur ein Attribut/s auf das Elternelement anzuwenden. – Jadam

Sie haben wahrscheinlich etwas herausgefunden, aber, wie es scheint, die CSS funktioniert der Trick justify-content property

justify-content: space-around;

in Form hinzufügen.

Quelle

2017-10-05 15:32:25 Jess

CSS Grid - Eingabe nicht respektieren Polsterung

Antwort

Verwandte Themen