CSS display:inline is not working

Question

I saw that there are many questions looking like this one but can't find a solution yet.

My HTML code:

<p class="ref" style="display:inline">
<p class="mini-caps">albums</p>: 
  Scum
  (1987) ; 
  Bootlegged in Japan
  (1998)
</p>
<p class="ref">
<p class="mini-caps">compilation </p>: 
  Noise for Music’s Sake 
  (2 CD, 2003)
</p>
<p class="ref">
  <p class="mini-caps">album</p>: 
  Illmatic 
  (1994)
</p>

I tried to style p.ref with display:inline with no success.

The output I would like to have:

albums : Scum (1987) ; Bootlegged in Japan (1998)

compilation : Noise for Music’s Sake (2 CD, 2003)

album : Illmatic (1994)

Nested paragraphs are not valid, and it's generally not advisable to make block-level elements inline. Just use spans. — isherwood
– isherwood, Commented Jul 5, 2018 at 14:27
I looked at your question again and can't glean your intent. You seem to have an XY problem happenin'. Why are you not just using basic, unstyled paragraphs for each item? If you want to group them for styling, wrap the album and compilation paragraph pairs in a div. — isherwood
– isherwood, Commented Jul 5, 2018 at 14:44
The thing is that I need to copy the layout/display of an existing book in HTML. And I need to add style to different elements in order to do that. But I try with little iterations/tests without knowing if it's the good way or not since I didn't practice so much HTML/CSS. — K Soze
– K Soze, Commented Jul 5, 2018 at 15:01
You can’t actually nest the p elements, at least in HTML mode: they are auto-closed before opening tag of any non-phrasing element (“block element” in HTML4 terms) and the next paragraph ends up being a sibling of the previous one, not its child. Don’t rely on the markup you write, always check the DOM that browser constructs from it. Also, see stackoverflow.com/questions/11570902/… — Ilya Streltsyn
– Ilya Streltsyn, Commented Jul 5, 2018 at 15:47

Nick Van Loocke · Accepted Answer · 2018-07-05 14:38:15Z

1

why the use of the p tags? You can properly do this with div's and span's.

<div class="ref">
    <span class="mini-caps">albums</span>: 
    <span>Scum (1987) ; Bootlegged in Japan (1998)</span>
</div>
<div class="ref">
    <span class="mini-caps">compilation </span>: 
    <span>Noise for Music’s Sake (2 CD, 2003)</span>
</div>
<div class="ref">
    <span class="mini-caps">album</span>: 
    <span>Illmatic (1994)</span>
</div>

See https://jsfiddle.net/1r9Lu6y3/6/

Hope this helps

BTW: Illmatic album is sooo good!

edited Jul 5, 2018 at 14:38

answered Jul 5, 2018 at 14:24

Nick Van Loocke

4982 silver badges13 bronze badges

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

3 Comments

Paulie_D Over a year ago

Frankly a dl/dt/dd structure might be ideal - developer.mozilla.org/en-US/docs/Web/HTML/Element/dl

Nick Van Loocke Over a year ago

@KSoze your welcome. Regarding your question could have a code example? I'm not quite following.

K Soze Over a year ago

@NickVanLoocke sorry I deleted my comment, it's working fine finally :) Thank you.

Collectives™ on Stack Overflow

CSS display:inline is not working

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related