0

我有以下 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 任何帮助将不胜感激

4

4 回答 4

1

用这个

.list_meta img{
    float:left;
}
于 2012-07-30T11:17:19.813 回答
0

将图像放入一个<ul>

于 2012-07-30T11:16:04.217 回答
0

就个人而言，我会使用列表而不是<div>'s / <span>'s - 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>
于 2012-07-30T11:17:13.333 回答
0

在每个图像上应用这些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>​

见小提琴

于 2012-07-30T11:17:50.077 回答