Q - ต้องการให้ตัวแบ่งจัดให้อยู่ตรงกลางค่ะ

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

ภาพประจำตัวสมาชิก
pprn
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 565
ลงทะเบียนเมื่อ: 02/07/2018 10:45 am

Q - ต้องการให้ตัวแบ่งจัดให้อยู่ตรงกลางค่ะ

โพสต์โดย pprn » 13/09/2018 5:26 pm

ต้องการให้ตัวแบ่งหน้าอยู่ตรงกลางให้ตรงกับ หน้าที่ 1 จาก 2 และเมื่ออยู่ในหน้าจอมือถือก็ต้องอยู่ตรงกลางด้วยค่ะ

what.jpg


โค้ด 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 เป็นดังรูป
loi1.jpg


แต่พอมาเป็นโหมดมือถือตัวแบ่งหน้าจะไม่ได้อยู่ตรงกับคำว่า หน้าที่ 1 จาก 2 ค่ะ
loi2.jpg

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 24 และ บุคคลทั่วไป 0 ท่าน