Question

我目前正在设计http://unslider.com/ jquery横幅。我想将点的样式设置为以矩形为中心。当我在点类中设置背景时，它会将它们拉出中心。

我只是在它们周围包裹一个div，但由于html中没有引用，我不知道该怎么做。我试图使用背景这样做，但它创造了问题。 CSS： .banner {宽度100％！重要; 身高：自动！重要; 位置：相对; 溢出：自动; }

.dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5%;
  text-align: center;
  background-color:rgba(0, 0, 0, 0.5);
  height:3vw;
  width:7vw;
  padding-top:1vw;

}

.dots li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 4px;
  text-indent: -999em;
  border: 2px solid #fff;
  border-radius: 6px;
  cursor: pointer;
  background:#e8e8e9;
  -webkit-transition: background .5s, opacity .5s;
  -moz-transition: background .5s, opacity .5s;
  transition: background .5s, opacity .5s;
}

HTML：

<div class="banner">
    <ul>
        <li><div class ="image-container"><img src="images_slider/slide1.jpg" alt="Slide1" width="1920" height="500">
        <a href="#"><img class="leftbtn hvr-grow" alt="" src="images_slider/learnmore.png"></a>
        <a href="#"><img class="rightbtn  hvr-grow" alt="" src="images_slider/catalog.png"></a></div>
        </li>
        <li><div class ="image-container"><img src="images_slider/slide2.jpg" alt="Slide2" width="1920" height="500">
         <a href="#"><img class="leftbtn  hvr-grow" alt="" src="images_slider/contact.png"></a></div>
        </li>
        <li><div class ="image-container"><img src="images_slider/slide3.jpg" alt="Slide3" width="1920" height="500">
        <a href="#"><img class="leftbtn  hvr-grow" alt="" src="images_slider/learnmore.png"></a>
        <a href="#"><img class="rightbtn  hvr-grow" alt="" src="#"></a></div>
        </li>

    </ul>
    </div>

Answer 1

正如我在评论中所说的那样，点已经在unlider中居中，你不必在点上添加一个类。如果你想在滑块下创建一个居中的点导航矩形，你只需要在你的css代码中使用它：

nav.unslider-nav {
    margin: 0 auto;
    width: 25%;
    background-color:rgba(0, 0, 0, 0.5);
}

页边距：0自动; 如果不是100％，则将点导航居中，如您所愿，更改宽度：; ，其他选择器可以使用在您的css-code中根据需要更改点：

nav.unslider-nav ol 
nav.unslider-nav ol li
nav.unslider-nav ol li.unslider-active

Answer 2

事实证明，在unlider代码中的某些内容是在点周围插入填充和大边框导致了时髦的行为。我将它们全部设置为零，并且中心现在很好。

Unslider样式样式问题点

2 个答案: