Damit werden neue Zeilen in CSS in form für jedes label

Habe ich HTML-code

<form id="answers">
blue
<input id="0" type="radio">
red
<input id="1" type="radio">
pink
<input id="2" type="radio">
<input type="submit">
</form>

und ich möchte jedes element in der neuen Linie. Ich will nicht alles verwenden, wie <br>. In der CSS-Datei habe ich versucht, dies zu tun: display: block aber nichts hat sich geändert.

  • Sollten Sie die Texte in <label> Elemente.
  • Natürlich hast du Recht. Dank
InformationsquelleAutor Jensky | 2014-08-19
  1. 5
    #answers input {display: block;}

    dadurch wird jede Eingabe in einer eigenen Zeile.
    Wenn Sie möchten, um jeden Eingang mit seinem label zusammen in einer Linie, Sie sollten etwas tun, wie 

    <form id="answers">
    <label>blue <input id="0" type="radio"></label>
    <label>red <input id="1" type="radio"></label>
    <label>pink <input id="2" type="radio"></label>
    <input type="submit">
</form>

    css:
    #Antworten label {display: block;}

    http://jsfiddle.net/barakedry/y6p54vzg/

    • beachten Sie auch, dass die numerische id ist nicht gültig und, dass Sie sollten geben radio-buttons das gleiche name-Attribut
    • Die numerischen IDs sind gültig HTML5.
    • Du hast Recht!, Alltag Sie lernen, etwas... mathiasbynens.sein/notes/html5-id-Klasse
    InformationsquelleAutor Barak
  2. 0

    Müssen Sie möglicherweise verwenden Sie box-sizing:border-box;.

    Gibt es mehr Informationen über dieses Thema in diesem thread: input mit display:block ist ein block, warum nicht?

    InformationsquelleAutor tommymcdonald
  3. -2

    Wenn Sie ändern, können Sie Ihren HTML-code so wie bereits in den Kommentaren und Antworten können Sie die wrap-Eingabe und text mit Label oder andere Elemente mit display:block; wie ein div.
    Aber wenn Sie konnte nicht ändern Sie Ihre HTML-code, es ist unmöglich, sich zu nähern, um das Ziel der Verwendung von reinem CSS, aber Sie können die JQuery-in diesem Fall:

    $("input").after("<br />");

    Check-JSFiddle Demo

    InformationsquelleAutor Moshtaf
Schreibe einen Kommentar