亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

為什么我的是顯示在同一排的?

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


正在回答

1 回答

知道了,

.rating-item{

display: inline-block;

width: 66px;

height: 76px;

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

cursor:pointer;/*光標呈現一只手*/

}

但是為什么是inline-block還是有點疑惑,inline-block不是不單獨占一行,共享同一行的嘛

0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

為什么我的是顯示在同一排的?

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號