HTML/CSS display inline not working

Question

I am trying to have an image and a h1 element on the same line. I have looked this up and tried to use display:inline; for both the parent div element as well as both of the elements.

This is what I have so far

<div style="display:inline;">
    <a class="blur" href="#"><img style="margin-top:6px;display:inline;margin-left:1320px;" src="images/gmail.png"></a>
    <h1 style="margin-top:6px;display:inline;margin-left:1220px;font-size:20px;color:white;font-style:italic;">Mail Us</h1>
</div>

This displays the image on the line I want, but the h1 element under it.

What I want to accomplish is both of these elements on the same line.

I'm not sure how big your intended display size is, but you have a `margin-left` of 1320px, I assume there's not going to be much room left for the H1 tag next to it. Without really knowing what you're trying to do, I think you may be better off using `float: right`. [Float article](https://css-tricks.com/all-about-floats/) — James Hay, Apr 22 '15 at 23:09
you should be applying the `display: inline` style to the tag not the tag — deowk, Apr 22 '15 at 23:11
my bad the element will display inline by default so just remove it from the tag. — deowk, Apr 22 '15 at 23:20
To prevent the wrapping, add `white-space: nowrap` to the main `div`. But doing so will put your `h1` tag 1220px to the right of the `img`, which *may* not be what you're going for. — Rick Hitchcock, Apr 22 '15 at 23:20

score 3 · Accepted Answer · edited May 23 '17 at 12:28

3

You need use display:inline-block for each element (not the parent). Fiddle with your example: http://jsfiddle.net/Lupjuby6/

And please, do not use CSS inline!! This is very bad to your HTML, besides making the code more complicated to analyze, and a lot of other bad things.

edited May 23 '17 at 12:28

Community

1
1

answered Apr 22 '15 at 23:11

Rafael Almeida

677
7
21

What exactly is the dfferent between display:inline and inline-block if CSS inline is bad? EDIT: The elements are still not on the same line. – JarFile Apr 22 '15 at 23:15
`inline-block` solves the problem only because you also removed the left margins. Restoring them restores the problem: http://jsfiddle.net/bb54c962/ – Rick Hitchcock Apr 22 '15 at 23:18
you do not need to set `display: inline-block` on the , it is a child element of the which displays inline by default – deowk Apr 22 '15 at 23:21
1

@JarFile when Rafael says "do not use CSS inline" it is not referring to the block vs **inline** vs inline-block display property; it is referring to including all of your CSS as part of a `style="prop:value; prop:value;"` on an element. Don't do _that_. Read the link Rafael provided. Put your styles in a separate `.css` stylesheet file, and use classes and ids as necessary. It _does_ also look like you are using an `
` simply to make the text big, you're _not_ using it because it is a top level header.
– Stephen P Apr 22 '15 at 23:24

score -2 · Answer 2 · answered Apr 22 '15 at 23:09

h elements ( <h1> , <h2> , <h3> , etc. ) take up an entire line, that's just the way they're meant to work. It is going to be a lot more work to put another element on the same line, instead you should try using an <a> or <p> and style it to look just like the <h1> did .

When you make this change just set both elements to

display: inline-block;

HTML/CSS display inline not working

2 Answers2

` simply to make the text big, you're _not_ using it because it is a top level header.