All geek questions in one place

Html css make div is on the same line as text

My question is: how do I avoid text on a new line?

My code is:

<html> <body> <p >Seating availability.</p> <p ><div style="width: 10px; height: 10px; background-color: green; border: 0px;" ></div> There are available seats.</p> <p ><div style="width: 10px; height: 10px; background-color: yellow; border: 0px;" ></div> Available seats are decreasing.</p> <p ><div style="width: 10px; height: 10px; background-color: orange; border: 0px;" ></div> Less than 15% of seats available.</p> <p ><div style="width: 10px; height: 10px; background-color: red; border: 0px;" ></div> There are no available seats.</p> </body> </html>

How do I encode this?

+6
source share
4 answers

add display: inline block for div

 <html> <head> <style> div { display: inline-block; } </style> </head> <body> <p >Seating availability.</p> <p><div style="width: 10px; height: 10px; background-color: green; border: 0px;" ></div>There are available seats.</p> <p ><div style="width: 10px; height: 10px; background-color: yellow; border: 0px;" ></div> Available seats are decreasing.</p> <p ><div style="width: 10px; height: 10px; background-color: orange; border: 0px;" ></div> Less than 15% of seats available.</p> <p ><div style="width: 10px; height: 10px; background-color: red; border: 0px;" ></div> There are no available seats.</p> </body> </html>
+5
source

There are so many display properties:

Try using display:inline-block;

 div style="width: 10px; height: 10px; background-color: green; border: 0px;display:inline-block;" ></div>

Hope this helps!

demonstration violin

Removing the <p></p> easy to use <div> because <p> always accepts a new line.

Updated Fiddle

+3
source

Use span instead of div and add (display: inline-block;) the item (p) cannot contain (div), but it can contain (span) 'Availability of places.

There are empty seats. Available seats are reduced. Less than 15% of available places. No places available.
+1
source

Put this code in your css file

 div { margin: 5px 10px 0 0 ; float:left; }

Fiddle

0
source

Source: https://habr.com/ru/post/957028/

More articles:


All Articles