ต้องการให้ตัวแบ่งหน้าอยู่ตรงกลางให้ตรงกับ หน้าที่ 1 จาก 2 และเมื่ออยู่ในหน้าจอมือถือก็ต้องอยู่ตรงกลางด้วยค่ะ
โค้ด PHP
โค้ด: เลือกทั้งหมด
<div class="pagination-toolbar clearfix text-center" style="
<ul>
<li class="pagination-start"><span class="pagenav">เริ่มต้น</span></li>
<li class="pagination-prev"><span class="pagenav">ก่อนหน้า</span></li>
<li><span class="pagenav">1</span></li>
<li><a href="/th/brand.html?start=10" class="pagenav">2</a></li>
<li class="pagination-next"><a title="" href="/th/brand.html?start=10" class="hasTooltip pagenav" data-original-title="ต่อไป">ต่อไป</a></li>
<li class="pagination-end"><a title="" href="/th/brand.html?start=10" class="hasTooltip pagenav" data-original-title="สุดท้าย">สุดท้าย</a></li>
</ul>
</div>
โค้ด CSS
โค้ด: เลือกทั้งหมด
.pagination-toolbar li:not(.pagination-start):not(.pagination-prev) > span {
color: #fff;
background-color: #3b5998;
}
.pagination-toolbar ul:not(.pagination-list) li > a, .pagination-toolbar ul:not(.pagination-list) li > span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: 0px;
line-height: 1.42857143;
color: #000066;
text-decoration: none;
background-color: #fff;
border: 1px solid #000066;
}
.pagination-toolbar>ul{
list-style-type: none;
}
.pagination-toolbar li:not(.pagination-start):not(.pagination-prev):not(.pagination-next):not(.pagination-end) > span {
color: #000066;
background-color: #fff;
}
.clearfix {
clear: both;
}
- โดย CSS .clearfix ใช้กับตัวอื่นด้วย
ลองแก้ CSS เป็นดังรูป
แต่พอมาเป็นโหมดมือถือตัวแบ่งหน้าจะไม่ได้อยู่ตรงกับคำว่า หน้าที่ 1 จาก 2 ค่ะ
ต้องการให้ตัวแบ่งหน้าอยู่ตรงกลางให้ตรงกับ หน้าที่ 1 จาก 2 และเมื่ออยู่ในหน้าจอมือถือก็ต้องอยู่ตรงกลางด้วยค่ะ
[attachment=2]what.jpg[/attachment]
[b]โค้ด PHP [/b]
[code]
<div class="pagination-toolbar clearfix text-center" style="
<ul>
<li class="pagination-start"><span class="pagenav">เริ่มต้น</span></li>
<li class="pagination-prev"><span class="pagenav">ก่อนหน้า</span></li>
<li><span class="pagenav">1</span></li>
<li><a href="/th/brand.html?start=10" class="pagenav">2</a></li>
<li class="pagination-next"><a title="" href="/th/brand.html?start=10" class="hasTooltip pagenav" data-original-title="ต่อไป">ต่อไป</a></li>
<li class="pagination-end"><a title="" href="/th/brand.html?start=10" class="hasTooltip pagenav" data-original-title="สุดท้าย">สุดท้าย</a></li>
</ul>
</div>
[/code]
[b]โค้ด CSS[/b]
[code]
.pagination-toolbar li:not(.pagination-start):not(.pagination-prev) > span {
color: #fff;
background-color: #3b5998;
}
.pagination-toolbar ul:not(.pagination-list) li > a, .pagination-toolbar ul:not(.pagination-list) li > span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: 0px;
line-height: 1.42857143;
color: #000066;
text-decoration: none;
background-color: #fff;
border: 1px solid #000066;
}
.pagination-toolbar>ul{
list-style-type: none;
}
.pagination-toolbar li:not(.pagination-start):not(.pagination-prev):not(.pagination-next):not(.pagination-end) > span {
color: #000066;
background-color: #fff;
}
.clearfix {
clear: both;
}
[/code]
[list]โดย CSS .clearfix ใช้กับตัวอื่นด้วย[/list]
[color=#FF0040]ลองแก้ CSS เป็นดังรูป [/color]
[attachment=1]loi1.jpg[/attachment]
แต่พอมาเป็นโหมดมือถือตัวแบ่งหน้าจะไม่ได้อยู่ตรงกับคำว่า หน้าที่ 1 จาก 2 ค่ะ
[attachment=0]loi2.jpg[/attachment]