Margin va to'ldirish nth-last-childda ishlamaydi

Oxirgi ikki raqamni 6 va 7 raqamlarini o'ng tomonda ko'rsatish kerak va u ko'rsatiladi, biroq bo'sh joyga muhtoj bo'lgan ikkita raqam o'rtasida bo'sh joy yo'q. Margin va to'ldirishni sinab ko'rdim, lekin ishlamayapman. Menga yordam berasizmi?

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.width-60 {
  width: 60%;
  border: 1px solid #ccc;
  height: 100%;
  position: relative;
}

.p p {
  color: blue;
  float: left;
  margin: 10px;
}

.p p a:nth-last-child(-n+2) {
  color: red;
  position: absolute;
  right: 30px;
  display: block;
}
<div class="width-60">
  <div class="p">
    
1


2


3


4


5


6


7

</div> </div>
</div> </div>
0

6 javoblar

The overlap is cause by the position: absolute. One way to solve this is to use flexbox

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.width-60 {
  width: 60%;
  border: 1px solid #ccc;
  height: 100%;
  position: relative;
}
.p {
  display: flex;
}
.p p {
  color: blue;
  margin: 10px;
}
.p p a {
  color: red;
}
.p p:nth-last-child(2) {
  margin-left: auto;
}
<div class="width-60">
  <div class="p">
    
1


2


3


4


5


6


7

</div> </div>
</div> </div>
2
qo'shib qo'ydi

Men siz uchun ishlayotgan bo'lsa, men 6 va 7-ni almashtirishga urinib ko'rmoqchiman. Shunga o'xshash narsa:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.width-60 {
  width: 60%;
  border: 1px solid #ccc;
  height: 100%;
  position: relative;
}

.p p {
  color: blue;
  float: left;
  margin: 10px;
}

.p p:nth-last-child(-n+2) {
  color: red;
  float: right;
  display: block;
}
<div class="width-60">
  <div class="p">
    
1


2


3


4


5


7


6

</div> </div>
</div> </div>
1
qo'shib qo'ydi
Yaxshi fikr. Lekin allaqachon u erda edi, men uni yo'q qilishni unutib qo'ydim. Hehe ..
qo'shib qo'ydi muallif Leon Freire, manba
Janob Aliyenga javob berganingiz uchun tashakkur. Bu men uchun ishlaydi. Men suzmoqdaman: o'ng; Yordamingiz uchun rahmat. Men tomondan torting
qo'shib qo'ydi muallif Narendra Verma, manba
Agar float dan foydalanayotgan bo'lsangiz display: block; yozuvini yozishingizga hojat yo'q.
qo'shib qo'ydi muallif Mr. Alien, manba

Fleksiyadan foydalanishga ochiq bo'lsangiz, buni sinab ko'rishingiz mumkin:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.width-60 {
  width: 60%;
  border: 1px solid #ccc;
}

.p {
  display: flex;
}

.p p {
  color: blue;
  margin: 10px;
}

.p p:nth-last-child(2) {
  margin-left: auto;
}

.p p a:nth-last-child(n-2) {
  color: red;
}
<div class="width-60">
  <div class="p">
    
1


2


3


4


5


6


7

</div> </div>
</div> </div>
1
qo'shib qo'ydi
Janobokuroga javob berganingiz uchun tashakkur. Men uchun ham ishlaydi. Men tomondan torting
qo'shib qo'ydi muallif Narendra Verma, manba

Margin va to'ldirish nth-childda yaxshi ishlaydi.

Sizning muammoingiz lavozimlar haqida ...

Biznes 1:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.width-60 {
  width: 60%;
  border: 1px solid #ccc;
  height: 100%;
  position: relative;
}

.p p {
  float: left;
  margin: 10px;
}

.p p a {
  color: blue;
}

.p p:nth-last-child(-n+2) {
  float: right;
}

.p p:nth-last-child(-n+2) a {
  color: red;
}
<div class="width-60">
  <div class="p">
    
1


2


3


4


5


7


6

</div> </div>
</div> </div>

To understand why I reverse the two lastest elements : StackOverflow

Biznes 2:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.width-60 {
  width: 60%;
  border: 1px solid #ccc;
  height: 100%;
  position: relative;
}

.width-60 .left p,
.width-60 .right p {
  margin: 10px;
  float: left;
}

.width-60 .left {
  float: left;
}

.width-60 .left a {
  color: blue;
}

.width-60 .right {
  float: right;
}

.width-60 .right a {
  color: red;
}
<div class="width-60">
  <div class="left">
    
1


2


3


4


5

</div> <div class="right">
6


7

</div> </div>
</div> </div>

Umid qilamanki yordam beradi.

0
qo'shib qo'ydi

Siz ham buzilmaydigan makondan foydalanishingiz mumkin

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.width-60 {
  width: 60%;
  border: 1px solid #ccc;
  height: 100%;
  position: relative;
}

.p p {
  color: blue;
  float: left;
  margin: 10px;
}

.p p a:nth-last-child(-n+2) {
  color: red;
  position: absolute;
  right: 30px;
  display: block;
}
<div class="width-60">
  <div class="p">
    
1


2


3


4


5


6


7

</div> </div>
</div> </div>
0
qo'shib qo'ydi

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">



<div class="width-60">
  <div class="p">
    
1


2


3


4


5


6


7

</div> </div>
</div> </div>

Mana mening kodim. oxirgi ikki p sinf qiymatini almashtirish shart emas.



0
qo'shib qo'ydi