为了账号安全,请及时绑定邮箱和手机立即绑定
关注
weixin_Yuki_10

为什么我的是显示在同一排的?

<!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>


知道了,

.rating-item{

display: inline-block;

width: 66px;

height: 76px;

background: url(img/rating.png) no-repeat;

cursor:pointer;/*光标呈现一只手*/

}

但是为什么是inline-block还是有点疑惑,inline-block不是不单独占一行,共享同一行的嘛

2019-04-08
回复 0

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信