Я использовал figma
для создания дизайна и экспортировал css код ниже. Я добавил несколько классов div, но они все еще не подходят должным образом.
Я пытался сделать классы подклассом основного класса, но он все еще не работал.
Я предполагал, что это может сработать как это делают столбцы и строки, сначала идут строки, затем следуют столбцы.
.pagingg {
position: absolute;
width: 338px;
height: 61px;
left: 88px;
top: 97px;
background: #FBF6F6;
border: 1px solid #F8EBEB;
box-sizing: border-box;
border-radius: 2px;
}
.pagingg.firstpg {
position: absolute;
width: 88px;
height: 19px;
left: 104px;
top: 106px;
background: #FFFFFF;
border: 1px solid #E6C3C3;
border-radius: 2px;
}
.pagingg.pgnum {
position: absolute;
width: 58px;
height: 14px;
left: 223px;
top: 110px;
font-family: Open Sans;
font-style: normal;
font-weight: normal;
font-size: 10px;
line-height: 14px;
/* identical to box height */
color: #000000;
}
.pagingg.lastpg {
position: absolute;
width: 89px;
height: 16px;
left: 214px;
top: 133px;
background: #FFFFFF;
border: 1px solid #E6C3C3;
border-radius: 1px;
}
.nextpg {
position: absolute;
width: 88px;
height: 19px;
left: 319px;
top: 106px;
background: #FFFFFF;
border: 1px solid #E6C3C3;
border-radius: 2px;
}
.pagingg.fpg {
position: absolute;
width: 22px;
height: 15px;
left: 138px;
top: 106px;
font-family: Open Sans;
font-style: normal;
font-weight: 300;
font-size: 11px;
line-height: 15px;
/* identical to box height */
color: #000000;
}
.pagingg.pgnumtext {
position: absolute;
width: 58px;
height: 14px;
left: 223px;
top: 110px;
font-family: Open Sans;
font-style: normal;
font-weight: normal;
font-size: 10px;
line-height: 14px;
/* identical to box height */
color: #000000;
}
.pagingg.lastpgtext {
position: absolute;
width: 21px;
height: 15px;
left: 247px;
top: 133px;
font-family: Open Sans;
font-style: normal;
font-weight: 300;
font-size: 11px;
line-height: 15px;
/* identical to box height */
color: #000000;
}
.pagingg.nextpgtext {
position: absolute;
width: 26px;
height: 15px;
left: 350px;
top: 107px;
font-family: Open Sans;
font-style: normal;
font-weight: 300;
font-size: 11px;
line-height: 15px;
/* identical to box height */
letter-spacing: 0.075em;
color: #000000;
}
<div class="pagingg">
<div class="pagingg firstpg">
First
</div>
<div class="pgnum">
<div class="pgnumtext">2 0f 5</div>
</div>
<div class="lastpg">
<div class="lastpgtext">Last</div>
</div>
<div class="nextpg">
<div class="nextpgtext">Next</div>
</div>
</div>