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

使用嵌套的div，每个div有一个背景图片，我想图像并排侧嵌套的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; 
}

来源

2013-02-28 Rao

为什么你在pre标签之后没有关闭div？ – Shail 2013-02-28 11:30:57

@我希望他们嵌套。 – Rao 2013-02-28 11:31:39

你为什么要放pre标签？ – Ankit 2013-02-28 11:32:26

Demo

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

<div class"star" 
     ^missing =

与那些固定的，这个CSS将做到这一点：

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

来源

2013-02-28 11:43:01 MrCode

啊..愚蠢的错误。谢谢！ – Rao 2013-02-28 11:52:20

你可以做到以下几点：

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

来源

2013-02-28 11:36:36 Shail

试试这个CSS

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

来源

2013-02-28 11:37:11 Ankit

许可但他没有提到任何地方:)，如果需要做出评级功能，他最好有恒星的div而不是嵌套他们。 – Ankit 2013-02-28 11:41:41

Heyy，我正在评论自己，为什么要发表评论，如果要删除它。 – Ankit 2013-02-28 11:42:49

他希望我们猜出他想做什么... – Shail 2013-02-28 11:46:36

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

回答

相关问题