สอบถามตัวแบ่ง page ใน css

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

Moderator: mindphp

hayatee
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 670
ลงทะเบียนเมื่อ: 19/04/2021 10:01 am

สอบถามตัวแบ่ง page ใน css

โพสต์ที่ยังไม่ได้อ่าน โดย hayatee »

อยากให้ตัวแบ่งเพจอยู่บรรทัดแถวเดียวกันต้องกำหนดยังไงค่ะ

HTML CSS-1.png
HTML CSS-1.png (7.08 KiB) Viewed 1452 times
ไฟล์ html

โค้ด: เลือกทั้งหมด

    <div class = "row">
                                <div class="footer">
                                    <tr>
                                         <td>  <div class="text-footer" >100 กระทู้</div></td> 
                                         <td>  <div class="Selection-Base"><img src="images/OL.png" /><img src="images/OL.png" /></div></td> 
                                         <td>  <div class="Selection-Base-1"><img src="images/OL.png" /></div></td> 
                                         <td>  <div class="Selection-Base-2">1</div></td> 
                                         <td>  <div class="Selection-Base-3">of 20</div></td> 
                                         <td>  <div class="Selection-Base-4"><img src="images/OL1.png" /></div></td> 
                                         <td>  <div class="Selection-Base-5"><img src="images/OL1.png" /><img src="images/OL1.png" /></div></td> 
                                    
                                        </tr>
                                        </div>
                                </div>
ไฟล์ css

โค้ด: เลือกทั้งหมด

.text-footer{
    /* 100 กระทู้ */

    position: absolute;
    width: px;
    height: 30px;
    left: 700px;
    top: 1050px;
    font-family: Kanit;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 21px;
    text-align: right;
    color: #555555;
}

.Selection-Base{

/* Selection / Base */
position: absolute;
    left: 76.25%;
    right: 22.08%;
    left: 63.25%;
    bottom: -52.79%;
    background: #EAEAEA;
    border-radius: 3px;
}


.Selection-Base-1{
    /* Selection / Base */
    position: absolute;
    left: 65.47%;
    right: 25.86%;
    top: 149.79%;
    bottom: 29.21%;
    background: #EAEAEA;
    border-radius: 3px;
}


.Selection-Base-2{
    /* Selection / Base */

    position: absolute;
    left: 68.25%;
    right: 28.97%;
    top: 150.05%;
    bottom: 29.21%;
    background: #FFFFFF;
    border: 1px solid #DADADA;
    box-sizing: border-box;
    border-radius: 6px;
}




.Selection-Base-3{
    /* of 20 */
    position: absolute;
    height: 732px;
    left: 899px;
    right: 229px;
    top: calc(50% - 24px/2 + 355.5px);
    font-family: Kanit;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #555555;
}

.Selection-Base-4{
    /* Selection / Base */

    position: absolute;
    left: 78%;
    right: 62.33%;
    top: 151.79%;
    bottom: 19.82%;
    background: #EAEAEA;
    border-radius: 3px;
    transform: rotate(-180deg);

}

.Selection-Base-5{
    /* Selection / Base */
    position: absolute;
    left: 67.22%;
    right: 18.11%;
    top: 151.79%;
    bottom: 25.82%;
    background: #EAEAEA;
    border-radius: 3px;
    transform: rotate(-180deg);
}
ภาพประจำตัวสมาชิก
eange08
PHP VIP Members
PHP VIP Members
โพสต์: 16030
ลงทะเบียนเมื่อ: 22/12/2020 10:09 am

Re: สอบถามตัวแบ่ง page ใน css

โพสต์ที่ยังไม่ได้อ่าน โดย eange08 »

  • ในส่วนของ CSS ให้ตัดเอาตัวกำหนดตำแหน่งออกอย่าง position, left, right, top, bottom ออกเนื่องจากมันกำหนดตำแหน่งอยู่ทำให้จัดได้ยาก

โค้ด: เลือกทั้งหมด

.footer {
                text-align: right;
            }
           .text-footer{
    /* 100 กระทู้ */

    /*position: absolute;*/
    width: px;
    height: 30px;
/*    left: 700px;
    top: 1050px;*/
    font-family: Kanit;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 21px;
    text-align: right;
    color: #555555;
}

.Selection-Base{

/* Selection / Base */
/*position: absolute;*/
/*    left: 76.25%;
    right: 22.08%;
    left: 63.25%;
    bottom: -52.79%;*/
    background: #EAEAEA;
    border-radius: 3px;
}


.Selection-Base-1{
    /* Selection / Base */
    /*position: absolute;*/
/*    left: 65.47%;
    right: 25.86%;
    top: 149.79%;*/
    bottom: 29.21%;
    background: #EAEAEA;
    border-radius: 3px;
}


.Selection-Base-2{
    /* Selection / Base */

/*    position: absolute;
    left: 68.25%;
    right: 28.97%;
    top: 150.05%;
    bottom: 29.21%;*/
    background: #FFFFFF;
    border: 1px solid #DADADA;
    box-sizing: border-box;
    border-radius: 6px;
}




.Selection-Base-3{
    /* of 20 */
/*    position: absolute;
    height: 732px;
    left: 899px;
    right: 229px;*/
    /*top: calc(50% - 24px/2 + 355.5px);*/
    font-family: Kanit;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    /*display: flex;*/
    align-items: center;
    text-align: center;
    color: #555555;
}

.Selection-Base-4{
    /* Selection / Base */

/*    position: absolute;
    left: 78%;
    right: 62.33%;
    top: 151.79%;
    bottom: 19.82%;*/
    background: #EAEAEA;
    border-radius: 3px;
    transform: rotate(-180deg);

}

.Selection-Base-5{
    /* Selection / Base */
/*    position: absolute;
    left: 67.22%;
    right: 18.11%;
    top: 151.79%;*/
    /*bottom: 25.82%;*/
    background: #EAEAEA;
    border-radius: 3px;
    transform: rotate(-180deg);
}
  • ส่วนตัวหน้า html ให้ลบเอา <tr>, <td> ออก แล้วเปลี่ยนจากใช้ div มาเป็น span เพราะถ้าใช้ div มันจะแสดงข้อความอย่างละบรรทัด

โค้ด: เลือกทั้งหมด

 <div class = "row">
    <div class="col-md-12 footer">
        <span class="text-footer" >100 กระทู้</span>
        <span class="Selection-Base"><img src="images/OL.png" /><img src="images/OL.png" /></span>
        <span class="Selection-Base-1"><img src="images/OL.png" /></span>
        <span class="Selection-Base-2">1</span>
        <span class="Selection-Base-3">of 20</span>
        <span class="Selection-Base-4"><img src="images/OL1.png" /></span>
        <span class="Selection-Base-5"><img src="images/OL1.png" /><img src="images/OL1.png" /></span>
    </div>
</div>
ตอบกลับโพส

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

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 41