Prevent line break after </div>

Question

Is there a way to prevent line break after div using css?

For example, I have

<div class="label">My Label:</div> <div class="text">My text</div> 

and want it displayed as follows:

My shortcut: My text

thanks for the help

Update:

After no css solution has led to a completely satisfactory solution, I will use <span> as some of the suggested answers

Answer 1

display:inline;

OR

float:left;

OR

display:inline-block; - May not work in all browsers.

What is the purpose of using div here? I would suggest span since this is an inline level element, while a div is a block level element.

---

Please note that each option above will work differently.

display:inline; turns a div into the equivalent of a span . It will not be affected by margin-top , margin-bottom , padding-top , padding-bottom , height , etc.

float:left; saves the div as a block level element. It still takes up space as if it were a block, however the width will be tied to the content (assuming width:auto; ). For some effects, you may need clear:left; .

display:inline-block; is the "best of both worlds" option. The div element is considered as a block element. It responds to all margin , padding and height rules, as expected for a block element. However, it is considered as an inline element for placement inside other elements.

Read this for more information.

Answer 2

 .label, .text {display: inline} 

Although, if you use this, you can also change the div to span.

Answer 3

A DIV by default is a BLOCK display element, that is, it is on its own line. If you add a CSS: inline property mapping, it will behave the way you want. But perhaps you should consider SPAN instead?

Answer 4

div elements are block elements, so by default they take the top full available width.

One way is to turn them into inline elements:

 .label, .text { display: inline; } 

This will have the same effect as using span elements instead of div elements.

Another way is to place the elements:

 .label, .text { float: left; } 

This will change the order in which the width of the elements is determined, so that they will only be wider than their contents. It will also make the elements float next to each other, just as the images move next to each other.

You may also consider changing the items. The div element is for sections of a document. I usually use the label and span element for such a construction:

 <label>My Label:</label> <span>My text</span> 

Answer 5

 <span class="label">My Label:</span> <span class="text">My text</span> 

Answer 6

divs are used to create a website structure or to store large amounts of text or elements, but you seem to use them as a label, you should use a span, it will put both texts next to eachother automatically, and you won’t need to direct CSS code for him.

And even if other people tell you that you will move the elements, it's best to just change the tags.

Answer 7

 <div id="hassaan"> <div class="label">My Label:</div> <div class="text">My text</div> </div> 

CSS

 #hassaan{ margin:auto; width:960px;} #hassaan:nth-child(n){ clear:both;} .label, .text{ width:480px; float:left;} 

Answer 8

Try applying the clear:none css attribute to the label.

 .label { clear:none; } 

Answer 9

I do not think I saw this version:

 <div class="label">My Label:<span class="text">My text</span></div> 

Answer 10

try putting your div in css

 .label { float:left; width:200px; } .text { float:left; } 

Answer 11

Many times I managed to get a div without line breaks after them, playing with the float css attribute and css width attribute.
Of course, after developing a solution, you should test it in all browsers, and in each browser you must resize the windows to make sure that it works under any circumstances.

Answer 12

use this code for a normal div display: inline;

use this code if you use it in a display: inline-table; table display: inline-table; better than table