Question

我有以下CSS规则：

.list_meta {
font-size: 10px;
line-height: 18px;
margin-bottom: -1px;
color: 
#999;
text-transform: uppercase;
display: block;
}

我有一组星形图像，我想将其显示为***** 相反，它们显示为：

*
*
*
*
*

我正在尝试的代码是：

<span class="list_meta">
   <span style="float:left; padding-right:10px; display: inline;">
      <img src="small_star.png" alt="Star" height="9" width="10">
      <img src="small_star.png" alt="Star" height="9" width="10">
   </span>
5 Star Rating</span>

我想实现***** 5 Star Rating 任何帮助将不胜感激

Answer 1

使用此

.list_meta img{
    float:left;
}

Answer 2

将图像放在<ul>

中

Answer 3

我个人使用的是列表，而不是<div>的/ <span>的加载 - http://jsfiddle.net/spacebeers/fk2zL/

css代码：

li {
   float: left;
   list-style: none;
   padding-right:10px; 
}

HTML代码：

<ul>
    <li>*</li>
    <li>*</li>
    <li>*</li>
    <li>*</li>
    <li>*</li>
</ul>

Answer 4

在每张图片上应用这些style="float:left; padding-right:10px; display: inline;"样式，而不是在span

上使用它

<强> CSS：

span img {float:left; padding-right:10px; display: inline;}

<强> HTML：

<span class="list_meta">
   <span>
      <img src="http://cdn1.iconfinder.com/data/icons/diagona/icon/16/031.png" alt="Star" height="9" width="10">
      <img src="http://cdn1.iconfinder.com/data/icons/diagona/icon/16/031.png" alt="Star" height="9" width="10">
   </span>
5 Star Rating
</span>

SEE FIDDLE

图像显示为堆叠而不是行

4 个答案: