How to "break line" via CSS?

Question 1

Let's suppose that I have a HTML page that renders something like bellow:

labelA [___INPUT-TEXT____] labelB [___INPUT-TEXT____]

However, I want to "break the line" on the second label, something like:

labelA [___INPUT-TEXT____]
labelB [___INPUT-TEXT____]

Assuming that I can not change the HTML code. How can I do it with CSS?

Here is an example:

<html><head><style>
#labelA { display:block; }
#labelB { display:block; }
</style></head>
<body>
<label for="ia" id="labelA">labelA</label><input id="ia" type="text"/>
<label for="ib" id="labelB">labelB</label><input id="ib" type="text"/>
</body></html>

Any help is appreciated.

Cheers,

EDIT: I mean { display: block; } instead of {inline:block}, thanks for pointing it out.

Question 2

display: block should fix this, assuming you don't have it floated.

Question 3

@brad, I was thinking the same thing, and clear: left would fix float.

Question 4

Use display: block; instead of inline: block; and I think it should do what you want.

EDIT Didn't read your question carefully enough. If you want to group the label and text input together on a line, you can use something like:

label, input {
 float: left;
}
label {
 clear: left;
}

...and here's a more polished jsFiddle demonstration courtesy of Tim Medora

Question 5

+1 - Here's a version of that which spaces the elements and vertically aligns the text: jsfiddle.net/bdWRV/1

Question 6

I tried all the answers in this post and this one seems to be the best option in my case. Thanks.

Question 7

Here's a non-obvious way if you can use :before:

#labelB:before {
 white-space: pre;
 content: '\A';
}

http://jsfiddle.net/userdude/9AkMu/

Question 8

interesting! would you please provide description of content: '/A'; any website.

Question 9

\A is a just a newline character that works in CSS (where \n would not).

Question 10

\n is "new line" and what is \a meaning ?

Question 11

could we apply like this : #someid /A{somestyle;} that I could give style to after a line.

Question 12

Assuming that I can not change the HTML code. How can I do it with CSS?

The easy way to do it would be to just wrap each label/input pair in a div (or other block element, or element styled as a block element). However, if you can't change the HTML...

Demo: http://jsfiddle.net/bdWRV/

#labelB:before{ content: ""; display: block; }

This works in Chrome 25, Firefox, and IE 9/10. In my opinion, it's sort of a hack. At best, it's not ideal.

Question 13

Thanks Tim, this is a handy option. However, in my particular case float seems to be a better option because is has better compatibility.

Question 14

You have placed wrong statement inline: block; this should be display: inline; or display: inline-block; or display: block; like this display should be defined. I think you need to learn css more then go to w3school or search for css tutorial in google or perhaps may be you have placed inline: block; mistakenly. For your question, you need to define display: block; is okay as other answers.

Question 15

Right, I mistakenly placed "inline:block" [Yes, I need to learn more CSS, I am a back-end developer afterall :) ]. I've tried several combinations as you suggested, but could not achieve my goal... Thanks

Question 16

just simple use <br /> but in your case, just simple used float using float is not guarantee unless you use 100% width in your element

below example using <br />

<label for="ia" id="labelA">labelA</label><input id="ia" type="text"/><br />
<label for="ib" id="labelB">labelB</label><input id="ib" type="text"/>

using float;

float:left;
width:100%;

metadept 7,9892 gold badges21 silver badges25 bronze badges · Accepted Answer · 2013-03-30 04:53:15Z

4

Use display: block; instead of inline: block; and I think it should do what you want.

EDIT Didn't read your question carefully enough. If you want to group the label and text input together on a line, you can use something like:

label, input {
 float: left;
}
label {
 clear: left;
}

...and here's a more polished jsFiddle demonstration courtesy of Tim Medora

Share

Improve this answer

edited Mar 30, 2013 at 5:05

answered Mar 30, 2013 at 4:53

metadept's user avatar

metadept

7,9892 gold badges21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tim M.

Tim M. Over a year ago

+1 - Here's a version of that which spaces the elements and vertically aligns the text: jsfiddle.net/bdWRV/1

2013年03月30日T05:03:14.417Z+00:00

Rafa

Rafa Over a year ago

I tried all the answers in this post and this one seems to be the best option in my case. Thanks.

2013年03月30日T14:19:00.697Z+00:00

CollectivesTM on Stack Overflow

How to "break line" via CSS?

5 Answers 5

2 Comments

4 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

CollectivesTM on Stack Overflow

5 Answers 5

2 Comments

4 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related