Ro'yxat elementlari orasidagi chiziq

JS Fiddle

Im kabi tartib yaratish uchun harakat qilaman:

One

--

Two

--

Three

Tartibda ro'yxatning har bir elementi orasidagi pseudo chiziqlari mavjud.

  • One
  • Two
  • Three
  • Four
  • Fiddledan men chiziqda o'ynashim mumkin, faqatgina uni ro'yxat elementlari o'rtasida teng ravishda joylashtirishda muammoga duch kelmoqdaman.

0

8 javoblar

Ro'yxat elementidan cheklovni olib tashlang ( li ), uning pseudo element blok-darajasini chiqarib, mutlaq joylashishni aniqlashni olib tashlang va unga cheklov berasiz.

Here you go: [fiddle]

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

ul{
  list-style-type: none;
}
li{
  position: relative;
}
li:not(:last-child):after{
  content:"";
  display: block;
  margin: 3em 0;
  border-bottom: 3px solid blue;
  width: 30px;
}

  • One
  • Two
  • Three
  • Four
</div> </div>

EKRAN: Drew Kennedining bu savolga sharhida aytganidek, uni tahrir qildim va u O'S talabiga ko'ra yanada mukammal ko'rinishga olib keldi.

2
qo'shib qo'ydi
Yaxshiyamki, soxta elementlarni markazlashtirmoqdamisiz?
qo'shib qo'ydi muallif panthro, manba
Javobni yaxshiroq ko'rish uchun tahrirlangan. Buni ko'rsatganingiz uchun tashakkur.
qo'shib qo'ydi muallif Rahul Arora, manba
Tasodifiy element uchun uni margin: 3em auto qilib oling va siz borishingiz yaxshi.
qo'shib qo'ydi muallif Rahul Arora, manba
OShning talabiga qarab, men oxirgi ro'yxat maqola qo'yilganidan keyin u qatorni xohlamaydi deb o'ylamayman. Sizning soxta elementingizni li: not (: last-child): dan keyin o'zgartirishingiz mumkin va u maqsadda ishlaydi.
qo'shib qo'ydi muallif Drew Kennedy, manba

Bu faqat siz elementlar orasidagi satrlarni beradi, birinchisiga qo'shilmaydi.

ul > li:not(:last-child):after {
 content:"";
  border-bottom: 3px solid blue;
  position: absolute;
  top: -15px; /* your top padding */
  left: 0;
  width: 30px;
}
1
qo'shib qo'ydi

Ro'yxat elementlari orasida cheklangan kenglik chegaralariga ehtiyoj bo'lsa, ularni fon tasvirini olish uchun linear-gradinet() dan foydalanishingizni tavsiya qilaman.

Quyida ishlaydigan misol bor:

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

ul {
  list-style-type: none;
}
li {
  padding: 1.5em 0;
}
li:not(:last-child) {
  background: linear-gradient(blue, blue) no-repeat;
  background-position: left bottom;
  background-size: 30px 3px; /* First value represents width
                                while second represents height of border */
}

  • One
  • Two
  • Three
  • Four
</div> </div>

0
qo'shib qo'ydi

Agar siz "li" ni tanlasangiz: displeyni namoyish qilish uchun: blokni belgilashingiz kerak bo'lsa, siz cheklovlarni o'zgartiring.

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

ul{
  list-style-type: none;
}
li{
  position: relative;
  margin-top:50px;
}
li:after{
  content:"";
  margin-top: 25px;
  border-bottom: 3px solid blue;
  width: 30px;
  display: block;
}

  • One
  • Two
  • Three
  • Four
</div> </div>

0
qo'shib qo'ydi

add left and bottom properties fiddle

li:after {
    content: "";
    border-bottom: 3px solid blue;
    position: absolute;
    width: 30px;
    bottom: -25px;
    left: 0px;
}
0
qo'shib qo'ydi

https://jsfiddle.net/h6ffn6L0/

ul{
  list-style-type: none;
}
li{
padding-bottom:30px;
position: relative;
}
li:after{
  content:"";
  border-bottom: 3px solid blue;
  position: absolute;
  top: -15px; /* your top padding */
  left: 0;
  width: 30px;
}
0
qo'shib qo'ydi

Siz li ga ko'ra, ularni joylashtirish uchun left va bottom xususiyatlarini kiritishingiz kerak.

Bu sizga yordam berishi kerak:

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

ul {
  list-style-type: none;
}

li {
  margin: 3em 0;
  position: relative;
}

li:after {
  content: "";
  border-bottom: 3px solid blue;
  position: absolute;
  width: 30px;
  bottom: -20px;
  left: 0;
}

  • One
  • Two
  • Three
  • Four
</div> </div>

0
qo'shib qo'ydi

Nima uchun chegara uchun li: keyin dan foydalanmoqdasiz? Bordiyu li elementga qo'shing:

li {
    border-bottom: 3px solid blue;
}

Chegaralar o'rtasidagi bo'shliqni to'ldirish va/yoki chekka joyidan foydalanishingiz mumkin.

0
qo'shib qo'ydi