CODEWITHSUNDEEP
htmlcss
Water Cooler v2
Water Cooler v2

Reputation: 33880

How do I make an HTML element start at the same line but end with a newline?

I'd like to have a newline (<br>) after each input control. How do I do that in CSS?

I must add: I want the input control to start on the same line as the label or anything that precedes it but to have a newline at its end so that anything follows it starts on a separate line.

I understand this would have to do with the Flex box model but I am not quite acquainted with that yet.

label {
  font-weight: bold;
}

input {
  display: / * what goes here? */
}
<label for="theButton">Button</label>
<input name="theButton" type="button" value="Click me">
<label for="theTextBox">Button</label>
<input name="theTextBox" type="text">

Upvotes: 1

Views: 997

Answers (2)

Temani Afif
Temani Afif

Reputation: 273523

In case you cannot/will not change the markup set display:block with input and float:left with label.

label {
  font-weight: bold;
  float: left;
  margin-right: 10px;
}

input {
  display: block;
}
<label for="theButton">Button</label>
<input name="theButton" type="button" value="Click me">
<label for="theTextBox">Button</label>
<input name="theTextBox" type="text">

By the way It's better to consider adjusting the HTML and use more elegant ways.

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

Use a pseudoelement on the labels to force a line-break

label::before {
  content: "\A"; /* U+000A is the newline sequence */
  display: block;
}

Codepen demo

This will place the label on a new line but it will keep the input in the same line of the previous label. You can also control the space between rows by setting an height on the pseudoelement

Upvotes: 5

Related Questions