web-dev-qa-db-fra.com

Comment insérer des sauts de ligne dans les documents HTML à l'aide de CSS

J'écris un service Web et je souhaite renvoyer les données au format XHTML. Parce que ce sont des données, pas du balisage, je veux le garder très propre - pas de <div>s ni de <span>s supplémentaires. Toutefois, pour aider les développeurs, je souhaite également que les données renvoyées soient lisibles dans un navigateur. Pour ce faire, je pense qu'une bonne façon de s'y prendre serait d'utiliser CSS. 

Ce que je veux faire, c'est insérer des sauts de ligne à certains endroits. Je suis conscient de display: block, mais cela ne fonctionne pas vraiment dans la situation que j'essaie de gérer maintenant - un formulaire avec des champs <input>. Quelque chose comme ça: 

<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>

Je souhaite qu'il soit rendu de sorte que chaque étiquette s'affiche sur la même ligne que le champ de saisie correspondant. J'ai essayé ceci: 

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

Mais cela ne semblait rien faire. 

htmlcss
38
Craig Andera

Il serait préférable d’envelopper tous vos éléments dans des éléments d’étiquette, puis d’appliquer CSS aux étiquettes. Les pseudo-classes: before et: after ne sont pas complètement prises en charge de manière cohérente.

Les étiquettes ont de nombreux avantages, notamment une accessibilité accrue (à plusieurs niveaux) et plus.

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

puis utilisez CSS sur vos éléments d'étiquette ...

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

Les contrôles de formulaire sont traités spécialement par les navigateurs. Par conséquent, beaucoup de choses ne fonctionnent pas nécessairement comme elles le devraient. L'une de ces choses est le contenu généré - cela ne fonctionne pas pour les contrôles de formulaire. A la place, placez les étiquettes dans <label> et utilisez label:before { content: '\a' ; white-space: pre; }. Vous pouvez également le faire en flottant tout et en ajoutant clear: left aux éléments <label>.

41
Jim

Il semblerait que vous souhaitiez afficher une liste d'éléments de formulaire dans une liste, n'est-ce pas? Hmm ... si seulement ces gars de la spécification HTML avaient pensé à inclure du balisage pour gérer une liste d'éléments ...

Je vous recommande de le configurer comme ceci:

<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>

Ensuite, le CSS devient beaucoup plus facile.

12
Jon Galloway

ce qui suit vous donnerait les nouvelles lignes. Cela créerait également des espaces supplémentaires devant ... vous auriez à gâcher l'indentation de votre source en supprimant la tabulation.

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>

et les css suivants

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

Une option consiste à spécifier un modèle XSLT dans votre XML que (certains) navigateurs traiteront, ce qui vous permettra d’inclure la présentation avec marquage, CSS, couleurs, etc.

Une fois dans XHTML, vous pouvez simplement ajouter un peu de remplissage autour des éléments avec CSS, par exemple.

formulaire d'entrée.a {margin-bottom: 1em}

2
DamienG

Le secret consiste à entourer votre truc, étiquette et widget dans une étendue dont la classe bloque et efface:

<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

Les options javascript compliquent tout. Faites comme Jon Galloway ou daniels0xff a suggéré.

0
lordscarlet

Je suis d'accord avec John Millikin. Vous pouvez ajouter des balises <span> ou quelque chose autour de chaque ligne avec une classe CSS définie, puis les afficher: block si nécessaire. Le seul autre moyen auquel je puisse penser est de faire du <input> un bloc inline et de lui faire émettre un très grand droit-padding, ce qui ferait en sorte que le contenu en ligne se termine.

Même dans ce cas, votre meilleur choix consiste à regrouper logiquement les données dans des balises <span> (ou similaires) pour indiquer que ces données appartiennent ensemble (puis laisser le CSS effectuer le positionnement).

0
Thunder3

L’élément CSS clear est probablement ce que vous recherchez pour les sauts de ligne get .

Entrée de formulaire #login { clarifier les deux; }

s'assurera qu'aucun autre élément flottant n'est laissé de part et d'autre de vos champs de saisie.

Référence

0
Leo Utskot