CSS-Formulare anstelle von Tabellen 2011

Ich habe es aufgegeben, CSS für das Formstyling zu verwenden, wenn es auf drei benachbarte Textfelder (wie eine Telefonnummer) oder eine Dropdown-Liste neben einem Textfeld trifft. Ich konnte einfach keine zuverlässige Methode finden, um es ohne gute alte Tische zu stylen.CSS-Formulare anstelle von Tabellen 2011

Ich denke darüber nach, CSS für Form-Styling zurück zu gehen; Ich weiß es nicht:

Ob es mehr nützlich ist, Beschriftungen oben oder auf der linken Seite des Feldes zu haben.
Wie man die Dinge stylt, so dass sie auch mit ein paar angrenzenden Formularelementen schön platzieren.

Referenzen? Ist das immer noch ein Wunschtraum?

Quelle

2011-01-04 Caveatrob

Sie sagen also, Sie wissen nicht, wie float oder das Box-Modell funktioniert? – rxgx

Es gibt ein paar CSS-Vorlagen speziell zum Auslegen von Formularen entwickelt.

Ich hoffe, das Sie in einer produktiven und ehrfürchtigen Richtung zeigen kann. Pass auf.

Quelle

2011-01-04 12:06:18

Nein, es ist sehr möglich, und ich (und viele andere) mache es seit Jahren.

Betrachten Sie float: (left|right) und display: (inline|inline-block).

Quelle

2011-01-04 02:44:15 alex

Verwenden Sie Etiketten über den Feldern oder auf der linken Seite? Was machen Sie, wenn Sie Textfelder nebeneinander platzieren müssen (wie Ortsvorwahl, Präfix, Suffix einer Telefonnummer)? Hast du Beispiele? – Caveatrob

@Caveatrob Überprüfen Sie das CSS und HTML von jeder anderen Website, die es tut. Schau in Schwimmern. – alex

@Caveatrob Wenn Sie drei Textfelder hatten und Sie diese nebeneinander haben wollten, hätten Sie jedes Float (wahrscheinlich mit etwas Padding) übrig. Sie würden dann klären: beide; nach. Wenn Sie etwas HTML zur Verfügung stellen können, können wir es mit CSS für Sie markieren. –

Sie meinen so?

alt text

Grundsätzlich schaffen wir ein pseudotable

.mxrow { 
clear: both; 
width: 100%; 
height: 50px; 
} 


.mxcell { 
float: left; 
padding-top: 10px; 
padding-bottom: 10px; 
height: 26px; 
} 

.mxcell_firstcell{ 
width: 25%; 
}

Und das Markup würde

<div class = "mxrow"> 
    <div class = "mxcell mxcell_firstcell"><input element /></div> 
    <div class = "mxcell mxcell_secondcell"><another form element/></div> 
</div>

Die einzelne Zelle Klassennamen dienen anwenden spezifische CSS (mein Markup ist ein Gitterrost)

sein

Quelle

2011-01-04 02:58:44

Ja. Ich hatte eine Menge Zeit damit, als ich mein erstes Floating/Divvy-CSS für Formulare erfand. Jedes Beispiel, das ich online zu finden scheint, hat eine einzige Label/Einzelformkontrolle pro Zeile. – Caveatrob

Nun, ich tat dies, weil viele Javascript-Animationen schlecht mit Tabellen arbeiten. Lass mich etwas CSS für dich holen –

keine graziöse Degradierung hier. –

Andere Leute geben Ihnen einige gültige vorschlagen ionen ... wenn Sie immer noch Probleme haben, können Sie ein Formular css Framework wie formee versuchen ... http://www.formee.org/

Quelle

2011-01-04 07:56:58 Nextneed

CSS-Formulare anstelle von Tabellen 2011

Antwort

Verwandte Themen