li{list-style: none;}
/*example*/
.example{position:relative; border:1px solid #ddd;}
.example ol{position:absolute;width:99%; padding-right:1%; height:20px;  text-align:right; line-height:20px; left:0px; bottom:0px; z-index: 999;}
.example ol li{width:20px;height:4px;margin-right:2px; display:inline-block;  overflow:hidden; background-color:rgba(255,255,255,0.5);}
.example ol li.seleted{background: #fff;}
/*
.example1{}
.example1 ol{position:relative;width: 80px;height: 20px;top:-30px;left:60px;}
.example1 ol li{float:left;width: 10px;height: 10px;margin: 5px;background: #fff;}
.example1 ol li.seleted{background: #1AA4CA;}

.example2{}
.example2 ol{position:relative;width: 80px;height: 20px;top:-30px;left:60px;}
.example2 ol li{float:left;width: 10px;height: 10px;margin: 5px;background: #fff;}
.example2 ol li.seleted{background: #1AA4CA;}
*/