0

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

我只会在它们周围包裹一个 div 但由于 html 中没有引用我不知道该怎么做。我曾尝试使用背景来做到这一点，但它产生了问题。CSS: .banner { 宽度 100% !important; 高度：自动！重要；位置：相对；溢出：自动；}

.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>
4

2 回答 2

0

事实证明，unslider 代码中的某些内容是在点周围插入填充和大边框，从而导致奇怪的行为。我将它们全部设置为零，现在居中很好。

于 2016-05-02T13:51:10.827 回答
0

正如我在评论中所说，这些点已经在 unslider 中居中，您不必为这些点添加一个类。如果你想在滑块下制作一个圆点导航的居中矩形，你只需要在你的 css 代码中：

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

边距：0 自动；如果不是 100%
更改宽度，则将点导航居中：；因为你喜欢
在你的css代码中使用其他选择器来改变你喜欢的点：

nav.unslider-nav ol 
nav.unslider-nav ol li
nav.unslider-nav ol li.unslider-active
于 2016-05-01T13:38:55.407 回答