'Display Div + span on same line?

Having trouble displaying a div and a span on the same line.. their styles are..

DIV

 color: black;
 display: inline;
 font-family: arial, sans-serif;
 font-size: 13px;
 height: 0px;
 margin-bottom: 0px;
 margin-left: 0px;
 margin-right: 0px;
 margin-top: 0px;
 overflow-y: visible;
 padding-top: 0px;
 white-space: nowrap;
 width: 0px;

SPAN

color: black;
display: inline;
font-family: arial, sans-serif;
font-size: 13px;
height: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-y: visible;
padding-top: 0px;
width: 0px;

DIV WHICH BOTH ARE WRAPPED IN

color: black;
display: block;
float: left;
font-family: arial, sans-serif;
font-size: 13px;
height: 20px;
margin-bottom: 0px;
margin-left: 8px;
margin-right: 0px;
margin-top: 0px;
overflow-y: visible;
padding-top: 1px;
width: 373px;

What would I need to change to get the div and span displaying on the same line? currently the div displays and then the span on the line under it.

htmlcss


Solution 1:[1]

You need to add display:inline;

Solution 2:[2]

The default 'display' value for a Div is to be a block level element, like a paragraph, that covers the whole 'line'.

You need to set the Div to be 'display: inline' to appear next to the span element.

Solution 3:[3]

Check out this jsFiddle.

You are missing floats an position in your css.

Hope this helps.

Solution 4:[4]

This is hard to answer without the HTML. At a first glance, I'd say you should float them both left.

Solution 5:[5]

I think float:left on div should do the job.

Solution 6:[6]

In the wrapping div you should have:

display: flex;
align-items: center;

and remove the display property from both elements.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Eddie
Solution 2 cusimar9
Solution 3 Community
Solution 4 David Fells
Solution 5 Vinnyq12
Solution 6 Mabu

Related Questions