Wie wechseln von Tisch zu div-Tag für FORMULAR-layout?
Ich bin merken die meisten Leute reden mit DIVs und CSS
label, textbox Paare. Wie könnte man die konvertieren einer Tabelle wie:
<table>
<tr>
<td><some Label1> </td>
<td><some TextBox1> </td>
</tr>
<tr>
<td><some Label2> </td>
<td><some TextBox2> </td>
</tr>
...
</table>
Aus der Verwendung einer Tabelle in sagen ein div mit CSS, ein Beispiel wäre hilfreich! Derzeit war ich mit einer Tabelle für so eine Sache, sich vorstellen, sagen, eine Website, die zeigt nur einige Informationen für den Benutzer. Wie würde ich die Paare (label, Textfeld) mit DIVs anstatt der Tabelle format?
Übernehmen die labels /textbox sind ASP.net labels und Textfelder.
InformationsquelleAutor JonH | 2009-11-19
Du musst angemeldet sein, um einen Kommentar abzugeben.
Betrachten dieses Artikel bei Woork mit dem Titel Sauber und Rein CSS Formular Design
Habe ich umgesetzt, dieser Stil, einschließlich der
fieldset
und optimiert alle Stile passend zum schauen/fühlen, was erforderlich war.Erwägen Sie die Verwendung
<label runat="server">
Erben der Stil des Labels via CSS anstelle vonasp:label
. Alternativ könnten Sie setzen Ihreasp:label
innerhalblabel
- tags. Daasp:label
strahlt<span>
wäre, dass einfach das Ergebnis in eine Reihe von<label><span></span></label>
.Nevermind ist nur aufgefallen, das Artikel... danke
wenn Sie gehen, um zu verwenden <label> tags im markup, erwägen Sie die Verwendung einer <asp:literal> statt <asp:label>. Der resultierende markup-Code wird nicht <span> - tags 🙂
Nur zur info, in der 3 oder so Jahren, die seit dieser Antwort, <asp:Label> don 'T render <span>s, so lange wie Sie haben eine "AssociatedControlID" - Attribut festgelegt.
habe gerade Zeit, um das Beispiel heute morgen.
InformationsquelleAutor p.campbell
Betrachten dieses Artikel mit dem Titel Tabellenfreie Formulare mit CSS von CssDrive.
Ein wenig Stil hilft wirklich. Ich habe das refactoring/ersetzen alle meine Tabelle würde die Formen mit dem Muster gefunden, in dem Artikel oben.
Mit dem folgenden code:
Hier ist die basic-Beispiel vorgestellt:
Der CSS:
HTML:
InformationsquelleAutor p.campbell
Auszug aus meinem code:
mit den folgenden css:
InformationsquelleAutor Gregoire
Ich habe im Grunde die gleiche Idee für die Schaffung einer tabellenfreie Layouts. Aber, ich benutze eine ungeordnete Liste um meine labels und inputs. Zum Beispiel:
Den CSS-Stilen kann genau das gleiche wie das, was pcampbell in seinem Beispiel. Der einzige Unterschied bei mir wäre die Zugabe von ein Stil für das UL, wie:
InformationsquelleAutor Chris
Basierend auf @p.Campbell beantworten und die Umsetzung mit css, ich schrieb diesen code in asp.net für ein login popup-Fenster:
css
aspx-Seite:
Den Ergebnis ist:
ja, es ist ein popup, modales Fenster, ich benutze jquery blockui wenn Sie sich Fragen,
InformationsquelleAutor Juanito