Make new lines in CSS in form for each label

Question

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

and I want to have each element in the new line. I don't want to use stuff like <br>. In CSS file I tried do this: display: block but nothing's changed.

You should put the texts in `` elements. – DanMan Aug 19 '14 at 20:18 — DanMan, Aug 19 '14 at 20:18
Of cource you're right. Thanks – Jensky Aug 19 '14 at 20:21 — Jensky, Aug 19 '14 at 20:21

Barak · Answer 1 · 2014-08-19T20:23:02.157

10

#answers input {display: block;}

this will make every input in its own line. If you wish to have every input with its label together in a line you should do something like

<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: #answers label {display: block;}

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

edited Aug 19 '14 at 20:23

answered Aug 19 '14 at 20:15

Barak

1,148
7
13

also keep in mind that numerical id is not valid and that you should have give radio buttons the same name attribute – Barak Aug 19 '14 at 20:24
3

Numerical IDs are valid as of HTML5. – DanMan Aug 19 '14 at 20:41
1

You are right!, everyday you learn something... https://mathiasbynens.be/notes/html5-id-class – Barak Aug 19 '14 at 20:51

score 0 · Answer 2 · edited May 23 '17 at 10:27

0

You may need to use box-sizing:border-box;.

There's more information on this very topic in this thread: input with display:block is not a block, why not?

edited May 23 '17 at 10:27

Community

1
1

answered Aug 19 '14 at 20:23

tommymcdonald

1,528
2
10
12

Make new lines in CSS in form for each label

2 Answers2

Linked