為什么我的是顯示在同一排的？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>星級評分-第一種實現方式</title>
<style type="text/css">
body,ul,li{
padding: 0;
margin: 0;
}
li{
list-style-type: none;
}
.rating{
height:76px:?
width:330px;
margin: 100px auto;
}
.rating-item{
float: left;
width: 66px;
height: 76px;
background: url(img/rating.png) no-repeat;
cursor:pointer;/*光標呈現一只手*/
}
</head>
<body>
</style>
?<!-- 第一種實現方式 -->
<ul class="rating" id="rating">
<li class="rating-item" title="很不好"></li>
<li class="rating-item" title="不好"></li>
<li class="rating-item" title="一般"></li>
<li class="rating-item" title="好"></li>
<li class="rating-item" title="很好"></li>
</ul>
<ul class="rating" id="rating2">
<li class="rating-item" title="很不好"></li>
<li class="rating-item" title="不好"></li>
<li class="rating-item" title="一般"></li>
<li class="rating-item" title="好"></li>
<li class="rating-item" title="很好"></li>
</ul>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
var rating = (function(){?
//點亮
var lightOn = function($item,num)
{
$item.each(function(index)
{
if(index<num)
{
$(this).css('background-position','0 -84px');
}
else
{
$(this).css('background-position','0 0');
}
});
};
var init = function(el,num)//el表示是哪一個評分，num表示默認需要點亮幾個星星
{
var $rating = $(el),
$item = $rating.find('.rating-item');//找父標簽，遍歷所有星星
// 初始化
lightOn($item,num);
// 事件綁定
$rating.on('mouseover','.rating-item',function()
{//將子元素rating-item的事件委托給父元素rating處理
lightOn($item,$(this).index()+1);
}).on('click','.rating-item',function()
{
num = $(this).index()+1;
}).on('mouseout',function()// 為父容器綁定事件
{
lightOn($item,num);
});
};
return {
init:init
};
})();
rating.init("#rating",2);
rating.init("#rating2",3);?
?
</script>
</body>
</html>
2019-04-08
知道了，
.rating-item{
display: inline-block;
width: 66px;
height: 76px;
background: url(img/rating.png) no-repeat;
cursor:pointer;/*光標呈現一只手*/
}
但是為什么是inline-block還是有點疑惑，inline-block不是不單獨占一行，共享同一行的嘛