Saut de ligne après une entrée sans balisage html

J'essaie d'afficher un nombre d'entrées et de leurs étiquettes correspondantes. Ils sont à la fois des éléments en ligne, et j'ai une solution qui fonctionne avec l'ajout d'une balise br à la fin comme

<label for="hello"></label>
<input id="hello" type="text" />
<br>
<label for="stackoverflow"></label>
<input id="stackoverflow" />

Aimerai résoudre ce sans superflu et de balisage HTML, j'.e avec les CSS. Quelle est la meilleure façon de le faire?

J'ai regardé d'autres questions semblables à ceci, mais l'alignement par ligne au lieu de par colonne.

  • Juste pour la commodité du raisonnement, c'est-- données tabulaires. Il y a un certain élément HTML faites pour gérer ça....just sayin'
InformationsquelleAutor Max | 2010-10-06
  1. 12

    Vous pouvez envelopper les étiquettes autour de vos données et de les afficher sous forme de blocs:

    <style>
  label { display: block; }
</style>

<label>
  Hello: <input name="hello">
</label>
<label>
  StackOverflow: <input name="stackoverflow">
</label>

    Notez que lorsque vous faites cela, vous n'avez pas besoin d'utiliser le for="name" attribut.

    L'autre sens (si vous ne voulez pas les étiquettes enroulé autour de vos entrées) consiste à faire flotter les étiquettes à gauche:

    <style>
  label { float: left; clear: left; }
</style>

    Cependant, en général, je préfère un peu plus de balisage, quelque chose qui relie le label et la input dans une logique d'éléments, appelé champ:

    <div class="field">
  <label for="hello">Hello</label>
  <input name="hello">
</div>
<div class="field">
  <label for="stackoverflow">Stackoverflow</label>
  <input name="stackoverflow">
</div>

    Parce que chaque champ est un div, il s'affiche comme un bloc automatiquement, mais vous pouvez le contrôler pour les champs de l'individu en tant que bien.

    • Votre "champ" div est essentiellement la façon dont je le fais aussi.
    • L'étiquette float: left; clear: left il a fait pour moi
    InformationsquelleAutor Andrew Vit
  2. 1

    Essayer de mettre display:inline-block pour votre input et label éléments. Ainsi, vous pouvez ajouter tout élément de type block en css spécifiques comme witdh ou margin-bottom.

    Vous pouvez également définir votre input et label à display:block et ajouter margin-bottom seulement à l'entrée. Ou vous pouvez l'inverser et ajouter un margin-top à vos étiquettes 😉

    Si vous souhaitez supprimer la marge sur le dernier élément, vous pouvez utiliser input:last-child {margin-bottom:0;}

    input, label {display:block;}
input {margin-bottom:18px;}
input:last-child {margin-bottom:0;}

/* Or to be specific you can use the attribut-selector
   which only works on inputs with type="text"
*/
input[type="text"]:last-child {margin-bottom:0;}
    • Bonne suggestion, mais il serait encore tout mettre sur une seule ligne (étiquette-entrée-étiquette d'entrée) sans marquage.
    • Vous êtes de droite. Mais dans ce cas, peut se définir à la fois les éléments à afficher:bloquer et ajouter un margin-bottom seulement pour les éléments d'entrée. J'ai mis à jour ma réponse.
    InformationsquelleAutor gearsdigital