html - 如何防止 headline 和 span 元素之间的换行符？

Question

我有一个 headlineh2 html 元素，后跟一个 span 标签。两者都应显示在一行中。

我的目的是显示文字，然后是评级星级。我正在使用来自 Turn a number into star rating display using jQuery and CSS 的 html+css如下:

<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;
}

这工作正常，但它引入了一个换行符。我该如何预防？

当我更改以下内容时，它将起作用:

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

但这是实现这一目标的正确方法吗？ inline-block 不会在某些浏览器中引起问题吗？

Answer 1

只需从 star 类中删除 display:block。它总是像段落标记一样引入换行符 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;
}