ナンバースタイリングスタイルの問題点

Question

私は現在、http://unslider.com/ jqueryバナーをスタイリングしています。 私は四角形の中央に配置するためにドットをスタイルしたいと思います。 ドットクラスで背景を設定すると、それらを中心から引き出します。

私はちょうどそれらの周りのdivをラップしますが、htmlで参照されていないので、私は何をすべきかわかりません。私はバックグラウンドを使ってこれをやろうとしましたが、問題が生じました。 CSS： .banner {width 100％！important; 身長：auto！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> 

Answer 1

私はドットがすでに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 

Answer 2

それはunsliderコードで何かがファンキーな行動を起こしドットの周りにパディングと大きな境界線を挿入して判明。私はそれらをすべて0に設定し、センタリングは現在うまくいきます。