/*example*/
.example{}
.example ol{position:relative;width: 150px;height: 20px;top:-50px;left:60px; list-style-type:none;}
.example ol li{float:left;width: 15px;height: 15px;margin: 5px;background: #fff; list-style-type:none;}
.example ol li.seleted{background: #1AA4CA; list-style-type:none;}

.example1{}
.example1 ol{
    position: relative;
    width: 150px;
    height: 30px;
    top: -50px;
    left: 250px;
    list-style-type: none;
}
.example1 ol li{float:left;width: 15px;height: 15px;margin: 5px;background: #fff; list-style-type:none;}
.example1 ol li.seleted{background: #1AA4CA; list-style-type:none;}

.example2{}
.example2 ol{position:relative;width: 150px;height: 20px;top:-50px;left:60px; list-style-type:none;}
.example2 ol li{float:left;width: 15px;height: 15px;margin: 5px;background: #fff; list-style-type:none;}
.example2 ol li.seleted{background: #1AA4CA; list-style-type:none;}