0

我在对齐两个元素时遇到问题。我希望在我的两个迷你内容滑块的导航箭头中间对齐分页。

我需要的设计示例：

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;从第二个箭头中删除。

设置 equal left& rightmargin on 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 回答