CODEWITHSUNDEEP
htmlcss
K Soze
K Soze

Reputation: 163

CSS display:inline is not working

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)

Upvotes: 0

Views: 67

Answers (1)

Nick Van Loocke
Nick Van Loocke

Reputation: 498

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!

Upvotes: 1

Related Questions