0

2つの要素の位置合わせに問題があります。2つのミニコンテンツスライダーのナビゲーション矢印の中央にページネーションを配置したいと思います。

私が必要とするものの設計例：

http://www.garyrevell.co.uk/student-i/PastedGraphic-8.png

現在進行中のWIPライブサイト-http ://www.garyrevell.co.uk/student-i/index.html

CSS

#slider1 { height: 1%; overflow:hidden; padding: 0 0 0 0;   }

#slider1 .viewport { float: left; width: 240px; min-height: 190px; overflow: hidden; position: relative; }

#slider1 .buttons { background:url("../images/buttons.png") no-repeat scroll 0 0 transparent; display: inline-block;  background-position: 0 -38px; text-indent: -999em; float: left; width: 39px; height: 24px; overflow: hidden; position: relative;  }

#slider1 .previous { background-position: 0 0; margin-left:5px;  }
#slider1 .next { background-position: 0 0; left: 130px }
#slider1 .disable { visibility: hidden; }

#slider1 .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0 top: 0; }
#slider1 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; width: 230px;}

    /* Tiny Carousel - Slider Bullets */

#slider1 .pager, #slider2 .pager { overflow:hidden; list-style: none; clear: top; margin: 0 0 0 45px; }

/*Normal Style*/

#slider1 .pager li, #slider2 .pager li{ float: left;  display: block; 

}

#slider1 .pager a, #slider2 .pager a { width: 15px;
height: 12px;
width: 12px;
background:url(../images/bullet-norm.png); background-position: left top; background-repeat:no-repeat;
float: left;
text-indent: -4000px;
position: relative;
margin-left: 3px;
color: transparent;
display:inline-block;
cursor: pointer;



}

#slider1 .pager a:hover{
    background-position: 0 50%;

}


#slider1 .pager .active {
    color: #fff; background-image:  url(../images/bullet-selected.png); } /*CURRENT IMAGE HERE*/
    #slider1 .overview { list-style: none; position:    absolute; width: 240px; left: 0 top: 0; }

    #slider1 .overview li{ float: left; margin: 0 20px 0 0;  width: 236px;


}



    a.pagenum {margin-top: 12px;}



    ul{border:0; margin:0; padding:0;}

どんな助けでも大歓迎です。

4

4 に答える 4

0

あなたが望む結果を達成するcss私のものであなたを更新してください：-css

CSS

#slider1 .pager, #slider2 .pager {
    list-style: none outside none;
    margin: 0 0 0 45px;
    overflow: hidden;
    position: relative;
    top: -23px;
}
于 2012-08-21T09:41:55.097 に答える
0

フロートleft＆rightそれぞれナビゲーション矢印とleft: 130px;2番目のものから削除します。

に等しいleft＆rightマージンをul.pager設定text-align: centerし、それに設定し、li display:inline-block

于 2012-08-21T09:42:12.127 に答える
0

セットする

ul.pager{
     margin: 0 auto; 
     display: table; (ife the first line above alone did not work...)
}

このコードは、他の.pager参照コードの後に​​配置します。また、.pagerクラスのパディングをすべて削除します。

于 2012-08-21T09:46:07.430 に答える
0

ページネーションを中央に配置することもできます

CSS：

.pager-wrapper{
    padding: 5px; 
    height: 23px;
    width: something;
    float: left;
    text-align: center;
}
a {
    padding: 10px;
    margin: 4px;
    border: 1px solid black;
    text-decoration: none;
    font-size: 1px;
}
a:hover {
    background: red;
    color: white;
}
.selected {
    background: red;
    color: white;
}

HTML：

<div class="pager-wrapper" >
<a class="selected" href="#">1</a><a href="#">2</a><a href="#n">3</a><a href="#">4</a>
</div>
于 2012-08-21T10:00:00.510 に答える