Line break after input using only css

Question

I got a html with a lot of label + input

<label>Application</label>
<input id="ApplicationName" />
...
<label>Foo</label>
<input id="Foo" />
...
<label>Junk</label>
<input id="Junk" />

I force a width to add some consistency

label {
    display: inline-block;
    width: 10em;
}
input {
    width: 10em;
}

With this style it's a bit better but the flow still breaks "anywhere" depending on the width of container. How can I make the label + input to be a block ? (Without enclosing both of them in a container)

Another acceptable solution would be to
add a virtual carriage return after each input or
before each label.
I didn't succeed to put it after because the input tag doesn't support after.
Neither can I put it before because

label::before {
    content: "\A";
    white-space: pre;
}

doesn't mix well with label{display:inline-block}

label {
    display:inline-block;
    width:10em;
}

input {
    width:10em;
}

<div>
    <label>namespace</label>
    <input id="namespace" />
            
    <label>Application</label>
    <input id="application" />
            
    <label>Description</label>
    <input id="Description" />
            
    <label>Author</label>
    <input id="Author" />
</div>
resize the window to exhibit unwanted behaviour

Enclosing them inside a container with `display:inline-block` could be the best solution. Why you don't want to use that solution? — Paulo Ramos, Nov 27 '17 at 14:19
The `` tag does not use or need a closing slash and never has. — Rob, Nov 27 '17 at 14:38
Here you go: `label:before { content: "\a"; white-space: pre; }` - messy, but it works. I've added a couple of other options and explanation into my answer for you. — Alicia Sykes, Nov 27 '17 at 15:51
I don't have control over the html. And, as this could possibly updated dynamically it'll hard to fix. And it's easier to read without container :) — frenchone, Nov 27 '17 at 17:25

score 2 · Accepted Answer · answered Nov 27 '17 at 14:28

You can use a mixture of floating and clearing, a bit old school but seems to work for the structure:

label {
  display: block;
  width: 10em;
  float: left; /* makes the element act like inline block */
  clear: left; /* clears any left floats so before so this should start on new line */
}

input {
  width: 10em;
  float: left;
}

<div>
  <label>namespace</label>
  <input id="namespace" />

  <label>Application</label>
  <input id="application" />

  <label>Description</label>
  <input id="Description" />

  <label>Author</label>
  <input id="Author" />
</div>

Or you could just give a width to your parent container to force the content onto the next line:

div {
  width: 21em;
}

label {
  display: inline-block;
  width: 10em;
}

input {
  width: 10em;
}

<div>
  <label>namespace</label>
  <input id="namespace" />

  <label>Application</label>
  <input id="application" />

  <label>Description</label>
  <input id="Description" />

  <label>Author</label>
  <input id="Author" />
</div>

Alicia Sykes · Answer 2 · 2017-11-27T15:48:56.993

0

Option #1, CSS-only

If you really can't edit the HTML, then you can apply white-space: pre; and content: "\a"; to the label:before. See this updated JSFiddle.

label:before {
  content: "\a";
  white-space: pre;
}

<label>Application</label>
<input id="ApplicationName" />

<label>Foo</label>
<input id="Foo" />

<label>Junk</label>
<input id="Junk" />

Option #2, HTML-only

A better solution could be to just wrap the <input>s in the <label>s (another benefit of this, is that you don't need to use the for attribute to link each label the the corresponding input!). Here's a working JSFiddle with your code snippet :)

input{
  width: 10em;
}

label{
  float: left; 
  clear: left;
}

<label>Application: <input id="ApplicationName" /></label>
        
<label>Foo: <input id="Foo" /></label>

<label>Junk: <input id="Junk" /></label>

edited Nov 27 '17 at 15:48

answered Nov 27 '17 at 14:18

Alicia Sykes

5,997
7
36
64

I don't think it will help : I want label to be on the left and input on the right. With this I'll get : label
input label
input label
... and I want label input
label input
label input
– frenchone Nov 27 '17 at 14:27
Yeah. It would probably better to do it that way but I got little or no way to alter the html. – frenchone Nov 27 '17 at 15:14
Ah, sorry - I misunderstood you- I've updated the answer to also provide a method without changing the HTML :) Does that help? – Alicia Sykes Nov 27 '17 at 15:41
thank you for your jsfiddle but this doesn't adress the problem of fixed width for label. I used Pete's solution – frenchone Nov 27 '17 at 17:22

Line break after input using only css

2 Answers2

Option #1, CSS-only

Option #2, HTML-only