Unslider 样式样式问题点答案

【问题标题】：Unslider Styling Style Issue DotsUnslider 样式样式问题点
【发布时间】：2016-04-29 19:15:57
【问题描述】：

我目前正在设计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>

【问题讨论】：

滑块的html代码？没有 html 代码很难提供帮助
@JavierGonzalez 已修复 :)
我没有看到点的代码，unslider 将点放置在中心，它们在点的 css 代码中使用：nav.unslider-nav, nav.unslider-nav ol, nav .unslider-nav ol li
对不起，我的错误，他们自动放置点的 html 代码，正如我在他们使用 nav.unslider-nav 和 nav.unslider-nav ol 和 nav.unslider-nav ol li 之前所说的那样 css点代码
当我使用这些选择器尝试强制居中时，我没有得到任何改变。现在列表以第一个列表元素为中心，而不是整个列表本身。我不确定为什么会发生这种情况，因为我有列表 inline-block 和 text-align: center 在父级上。 :(

标签： html css slider unslider

【解决方案1】：

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

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

margin: 0 auto; 如果不是 100%，则将点导航居中
根据需要更改 width:;
其他选择器用于您的随意更改点的css代码是：

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

【讨论】：

【解决方案2】：

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

【讨论】：