How to prevent linebreaks between headline and span elements?

Question

I have a headlineh2 html element followed by a span tag. Both should be shown in a single line.

My purpose is to show text, followed by rating stars. I'm using html+css from Turn a number into star rating display using jQuery and CSS as follows:

<h2 style="display:inline">title
    <span class="stars" style="width:150px">
         <span style="width:100px;"/>
    </span>
</h2>

span.stars, span.stars span {
    display: block;
    background: url(stars.png) 0 -16px repeat-x;
    height: 16px;
}
span.stars span {
    background-position: 0 0;
}

This works fine, BUT it introduces a linebreak. How can I prevent it?

When I change the following, it would work:

span.stars, span.stars span {
       display: inline-block;
}

But is this the right way to achieve this? Doesn't inline-block cause problems in some browsers?

remove display:inline from h2 style and remove display:block from span class. There won't be any linebreak. — Tashen Jazbi, Oct 02 '15 at 08:10
display: inline-block; if well used won't cause any problem however... there's still a space between inline-blocks elements. IF you don't want to kind of hack it with many tricks you will find around as adding font-size:0px, margin-left:-1px, etc... floating is the way to go. — Alvaro Menéndez, Oct 02 '15 at 08:11
@TashenJazbi but also the image is not shown anymore with this. — membersound, Oct 02 '15 at 08:24

score 1 · Answer 1 · answered Oct 02 '15 at 08:19

1

just remove display:block from star class. it always introduces a line break like paragraph tage there is

<h2 style="display:inline">title
    <span class="stars" style="width:150px">
         <span style="width:100px;"/>
    </span>
</h2>

span.stars, span.stars span {
    background: url(stars.png) 0 -16px repeat-x;
    height: 16px;
}
span.stars span {
    background-position: 0 0;
}

answered Oct 02 '15 at 08:19

Tashen Jazbi

1,068
1
16
41

I don't see the background image anymore with this. – membersound Oct 02 '15 at 08:21
ok, use background: url(star.png) no-repeat; background-size: 100%; now your background will be visible – Tashen Jazbi Oct 02 '15 at 10:08
@membersound also put something between span tag to get background image visible. if you don't want to put anything just write space between that tag. to write a space you've to write – Tashen Jazbi Oct 02 '15 at 10:16

Xahed Kamal · Answer 2 · 2015-10-02T08:31:33.380

-1

Just use the below CSS. I guess you'll get what you are looking for.

<h2>
    <span class="stars" style="width:150px">
         <span style="width:100px;"></span>
    </span>
    title
</h2>

h2{
    position:relative;
}

span.stars{
    background-image: url(http://henty-estate.com.au/wp-content/uploads/2012/07/5-stars.jpg);
    background-size: 100% 100%;
    position:relative; 
    display:inline-block; 
    height:16px; 
}

edited Oct 02 '15 at 08:31

answered Oct 02 '15 at 08:14

Xahed Kamal

2,203
1
20
41

Why would you use `position:absolute;` when you can use `inline-block` or `float`? – Nick Oct 02 '15 at 08:17
i find this better then inline-block or float. working fiddle to check it - http://jsfiddle.net/zahedkamal87/6jtkku28/ – Xahed Kamal Oct 02 '15 at 08:21
"My purpose is to show text, followed by rating stars.". yours is just the other way around. – membersound Oct 02 '15 at 08:23
okay.. i made it with Inline-block as you are trying to achieve it. Here is fiddle. http://jsfiddle.net/zahedkamal87/6jtkku28/1/ – Xahed Kamal Oct 02 '15 at 08:32

How to prevent linebreaks between headline and span elements?

2 Answers2