it-swarm.com.de

Einfügen von Zeilenumbrüchen in HTML-Dokumente mit CSS

Ich schreibe einen Webdienst und möchte die Daten als XHTML zurückgeben. Da es sich um Daten handelt, nicht um Markierungen, möchte ich sie sehr sauber halten - keine zusätzlichen <div>s oder <span>s. Aus Gründen der Bequemlichkeit für Entwickler möchte ich auch die zurückgegebenen Daten in einem Browser lesbar machen. Um dies zu erreichen, denke ich, dass es ein guter Weg wäre, CSS zu verwenden. 

Was ich ausdrücklich tun möchte, ist das Einfügen von Zeilenumbrüchen an bestimmten Stellen. Ich kenne display: block, aber es funktioniert nicht wirklich in der Situation, mit der ich jetzt umgehen möchte - einem Formular mit <input> -Feldern. Etwas wie das: 

<form>
  Thingy 1: <input class="a" type="text" name="one" />
  Thingy 2: <input class="a" type="text" name="two" />
  Thingy 3: <input class="b" type="checkbox" name="three" />
  Thingy 4: <input class="b" type="checkbox" name="four" />
</form>

Ich möchte es so rendern, dass jedes Etikett in derselben Zeile wie das entsprechende Eingabefeld angezeigt wird. Ich habe das probiert: 

input.a:after { content: "\a" }

Aber das schien nichts zu tun. 

38
Craig Andera

Es ist am besten, alle Ihre Elemente in Etikettenelemente zu verpacken und dann die Etiketten mit css zu versehen. Die Pseudo-Klassen Vorher und Nachher werden nicht konsistent vollständig unterstützt.

Label-Tags bieten viele Vorteile, darunter eine verbesserte Zugänglichkeit (auf mehreren Ebenen) und mehr.

<label>
    Thingy one: <input type="text" name="one">;
</label>

dann verwenden Sie CSS für Ihre Etikettenelemente ...

label {display:block;clear:both;}
54
BrewinBombers

Formularsteuerelemente werden speziell von Browsern behandelt, daher funktionieren viele Dinge nicht unbedingt so, wie sie sollten. Eines dieser Dinge ist der generierte Inhalt - es funktioniert nicht für Formularsteuerelemente. Wickeln Sie die Etiketten stattdessen in <label> ein und verwenden Sie label:before { content: '\a' ; white-space: pre; }. Sie können dies auch tun, indem Sie alles verschieben und clear: left zu den <label>-Elementen hinzufügen.

41
Jim

Es sieht so aus, als hätten Sie eine Reihe von Formularelementen, die Sie in einer Liste anzeigen möchten, richtig? Hmm ... wenn nur die HTML-Spezialisten gedacht hätten, Markup für eine Liste von Elementen zu verwenden ...

Ich würde empfehlen, dass Sie es so einrichten:

<form>
  <ul>
    <li><label>Thingy 1:</label><input class="a" type="text" name="one" /></li>
    <li><label>Thingy 1:</label><input class="a" type="text" name="one" /></li>
 </ul>
</form>

Dann wird das CSS wesentlich einfacher.

12
Jon Galloway

das Folgende würde Ihnen die Newlines geben. Es würde aber auch zusätzliche Leerzeichen vor den Platz bringen ... Sie müssten Ihre Quelleinrückung durch das Entfernen des Tabs durcheinander bringen.

form { white-space: pre }
4
Jimmy
<form>
   <label>Thingy 1: <input class="a" type="text" name="one" /></label>
   <label>Thingy 2: <input class="a" type="text" name="two" /></label>
   <label>Thingy 3: <input class="b" type="checkbox" name="three" /></label>
   <label>Thingy 4: <input class="b" type="checkbox" name="four" /></label>
</form>

und die folgende css

form label { display: block; }
2
daniels
<style type="text/css">
label, input { float: left; }
label { clear:left; }
</style>

<form>
    <label>thing 1:</label><input />
    <label>thing 2:</label><input />
</form>
2
Galen

Eine Option ist die Angabe einer XSLT-Vorlage in Ihrem XML, die von (einigen) Browsern verarbeitet wird, sodass Sie Präsentationen mit Markup, CSS, Farben usw. hinzufügen können, die die Benutzer des Web-Services nicht beeinträchtigen sollten.

Sobald Sie sich in XHTML befunden haben, können Sie die Elemente einfach mit CSS füllen, z.

form input.a {margin-bottom: 1em}

2
DamienG

Das Geheimnis ist, dass Sie Ihr gesamtes Ding, Ihr Label und Ihr Widget in einer Spanne umgeben, deren Klasse den Block blockiert und deutlich macht:

<style type="text/css">
.lb {
display:block;clear:both;
}
</style>

<form>
<span class="lb">Thingy 1: <input class="a" type="text" name="one" /></span>
<span class="lb">Thingy 2: <input class="a" type="text" name="two" /></span>
<span class="lb">Thingy 3: <input class="b" type="checkbox" name="three" /></span>
<span class="lb">Thingy 4: <input class="b" type="checkbox" name="four" /></span>
</form>
1
D-n Russler

Die Javascript-Optionen machen alles kompliziert. Machen Sie es wie Jon Galloway oder Daniels0xff.

0
lordscarlet

Ich stimme mit John Millikin überein. Sie können <span>-Tags oder etwas um jede Zeile mit definierter CSS-Klasse hinzufügen und diese dann anzeigen: blockieren. Die einzige andere Möglichkeit, dies zu tun, ist, den <input> zu einem Inline-Block zu machen und sie dazu zu bringen, "sehr große" Padding-Rechte auszugeben, was dazu führen würde, dass der Inline-Inhalt zusammenbricht.

Trotzdem ist es am besten, wenn Sie die Daten logisch in <span>-Tags (oder ähnlich) gruppieren, um anzuzeigen, dass diese Daten zusammengehören (und dann die Positionierung durch CSS übernehmen lassen).

0
Thunder3

Das CSS-Element clear ist wahrscheinlich das, was Sie suchen, um die Zeilenumbrüche zu bekommen.

#Login Form Eingabe { Lösche beide; }

stellt sicher, dass sich auf beiden Seiten Ihrer Eingabefelder keine anderen Floating-Elemente befinden.

Referenz

0
Leo Utskot