标签:
bootstrap分页在ul中添加pagination可显示如下效果:
bootstrap翻页在ul中添加pager类可显示如下效果;
结合分页与翻页可显示如下效果:
因此,需要3个块元素xian显示在同一列,解决办法:
为第一个和最后一个ul设置float分别为left和right
代码如下:
1 <div class="col-sm-offset-4 col-sm-3"> 2 <ul id="previous" class="pager"> 3 <li><a href="#">←上一页</a><> 4 </ul> 5 <ul id="pages" class="pagination"> 6 <li><a href="#">1</a><li> 7 <li><a href="#">2</a><li> 8 <li><a href="#">3</a><li> 9 <li><a href="#">4</a><li> 10 <li><a href="#">5</a><li> 11 </ul> 12 <ul id="next" class="pager"> 13 <li><a href="#">下一页→</a><li> 14 </ul> 15 </div>
css设置如下:
1 ul { 2 display: inline-block; 3 } 4 #previous { 5 float: left; 6 } 7 #next { 8 float: right; 9 } 10 #pages { 11 padding-left: 25px; 12 }
对于常见的块级元素如下:
<address> <blockquote> <dd> <div> <dl> <fieldset> <form> <hr> <noscript> <ol> <p> <pre> <table> <tfoot> <ul>
html5中新增的块级元素有:
<article> <aside> <audio> <canvas> <figcaption> <figure> <footer> <header> <hgroup> <output> <section> <vedio>
标签:
原文地址:http://www.cnblogs.com/witchgogogo/p/5552089.html