页面旋转木马控制按钮安排放置

时间:2017-03-03 13:33:40

标签: html css carousel

这听起来真的很微不足道,但左侧两个旋转木马控制按钮和右侧旋转控制按钮之间有一个空格,使它们间隔不均。

我在margin的左侧和右侧尝试了CSS li属性,但空间窗台仍然存在。还有其他人有这个麻烦吗?

<ol class="carousel-indicators main-carousel-indicators">
                    <li data-target="#carousel-example-generic-main" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic-main" data-slide-to="1" class=""></li>
                    <li data-target="#carousel-example-generic-main" data-slide-to="2" class=""></li>
                    <li data-target="#carousel-example-generic-main" data-slide-to="3" class=""></li>
                </ol>
<style>
.main-carousel-indicators{
padding: 2px;
}
.main-carousel-indicators li{
height: 14px;
width: 14px;
}
.main-carousel-indicators li.active{
height: 14px;
width: 14px;
}
.carousel-indicators li{
background-color:white;
border-color:transparent !important;
transition: all 0.25s ease;

}
.carousel-indicators .active{
background-color:#0D0155;
border-color:transparent !important;
}
</style>

1 个答案:

答案 0 :(得分:0)

试试这个,按钮之间有空格,因为li显示:inline;

.main-carousel-indicators li{
  height: 14px;
  width: 14px;
  display: block;
  float: left;
}