Question

我有一个标题h2 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

从星级中删除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;
}

Answer 2

只需使用下面的CSS。我想你会得到你想要的东西。

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

如何防止标题和span元素之间的换行？

2 个答案: