Question

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

我试图并排放置星星。这是我的html＆amp; 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;
}

Answer 1

您可以执行以下操作：

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

Answer 2

试试这个css

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

Answer 3

Demo

您的第一个问题是，您错过了所有课堂作业中的=：

 <div class"star"
          ^ missing =

修复后，这个CSS会这样做：

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

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

3 个答案: