html - 嵌套 div，每个 div 都有图像，并排显示图像

Question

使用嵌套 div，每个 div 都有一个背景图像，我希望图像并排

我试图把星星并排。这是我的 html & css 代码

<body>
  <div class="rate-stars">

    <div class"star" id="s5"><pre> </pre>
        <div class"star" id="s4"><pre> </pre>
            <div class"star" id="s3"><pre> </pre>
                <div class"star" id="s2"><pre> </pre>
                    <div class"star" id="s1"><pre> </pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
       </div>

</body>
</html>

我的 CSS：

.star
{
background-image: url("star-off.png");
float: left;
border: 0px;
width: 20px;
height: 20px;
margin: 0px;
padding: 20px;
}

score 1 · Accepted Answer

演示

你的第一个问题是你=在所有的课堂作业中都错过了：

 <div class"star"
          ^ missing =

修复了这些，这个 CSS 会做到：

.star
{
    background-image: url("star-off.png");
    background-repeat:no-repeat;
    width: 20px;
    height: 20px;
    margin-left:25px;
}

score 1 · Accepted Answer

您可以执行以下操作：

HTML 可以写成：

<div id="rate-stars">

<img id="star1" src="img/star1.png">
    <img id="star2" src="img/star2.png">

</div>

CSS：

    #star1 {
      left: 20px;
      position: absolute;
      top: 100px;
     }
    #star2 {
      left: 60px;
      position: absolute;
      top: 100px;
     }

score 1 · Accepted Answer

试试这个 CSS

.star
{
background-image: url("star-off.png") no-repeat top left;
border: 0px;
padding-left: 20px;
height: 20px;
margin: 0px;
}

html - 嵌套 div，每个 div 都有图像，并排显示图像

3 回答 3

Related

Reference