Подравнете елементите от списък с персонализирано CSS съдържание преди водещи символи

Имам този фрагмент от HTML:

<ul class="custom">
    <li data-bullet="a">Item 1</li>
    <li data-bullet="aa">Item 2</li>
    <li data-bullet="ab">Item 3.1<br/>Item 3.2</li>
    <li data-bullet="c">Item 4</li>
    <li data-bullet="d">Item 5</li>
    <li data-bullet="de">Item 6</li>
</ul>

и CSS:

.custom {
    list-style:none;
    padding:0;
    margin:0;
}
.custom li:before {
    display:inline-block;
    content:attr(data-bullet);
    width:50px;
}

/*
.custom {
    list-style:none;
    padding:0;
    margin:0;
}
.custom li:before {
    display:inline-block;
    content:attr(data-bullet);
    position:relative;
    top:0;
    left:-50px;
}
.custom li {
    padding-left:50px;
}
*/

http://jsfiddle.net/g0w989aa/1/

Той използва CSS преди съдържанието на елементите от списъка, за да създаде персонализирано номериране на списък. Проблемът е, че подравняването на текста не работи правилно, ако съдържанието на елемента от списъка е по-дълго от един ред.

Има ли начин съдържанието на редовете да се подравни правилно? Вече се опитах да позиционирам относително съдържанието и да дам подложка на елементите от списъка (вижте коментирания css в примера), но това също не работи.


html css html-lists
person Werzi2001    schedule 02.12.2014    source източник

Отговори (3)


arrow_upward
7
arrow_downward

Опитайте да компенсирате полето на целия div с ширината на before и след това премахнете полето на before след това.

Като този:

.custom {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-left: 50px;
}
.custom li:before {
  display: inline-block;
  content: attr(data-bullet);
  width: 50px;
  margin-left: -50px;
}
<ul class="custom">
  <li data-bullet="a">Item 1</li>
  <li data-bullet="aa">Item 2</li>
  <li data-bullet="ab">Item 3.1
    <br/>Item 3.2</li>
  <li data-bullet="c">Item 4</li>
  <li data-bullet="d">Item 5</li>
  <li data-bullet="de">Item 6</li>
</ul>

Алтернативно можете да го направите с позициониране, но може да срещнете проблеми с други засегнати елементи.

person Stewartside    schedule 02.12.2014

arrow_upward
3
arrow_downward

Надявам се, че това е, което търсите.

http://jsfiddle.net/xcfc63sL/

CSS

.custom {
    list-style: none;
    padding: 0;
    margin: 0;
}
.custom li {
    position: relative;
    padding-left: 50px;
}
.custom li:before {
    display: inline-block;
    content: attr(data-bullet);
    width: 50px;
    position: absolute;
    left: 0;
}

HTML

<ul class="custom">
    <li data-bullet="a">Item 1</li>
    <li data-bullet="aa">Item 2</li>
    <li data-bullet="ab">Item 3.1
        <br/>Item 3.2</li>
    <li data-bullet="c">Item 4</li>
    <li data-bullet="d">Item 5</li>
    <li data-bullet="de">Item 6</li>
</ul>
person Bijomon Varghese    schedule 02.12.2014

arrow_upward
1
arrow_downward

Можете да премахнете ширината от вашите li елементи before и да използвате padding-left и position: relative за вашите li и да направите съдържанието на :before да бъде position:absolute както следва.

.custom {
    list-style: none;
    padding: 0;
    margin: 0;
}
.custom li {
    position: relative;
    padding-left: 50px;
}
.custom li:before {
    display: inline-block;
    content: attr(data-bullet);
    position: absolute;
    left: 0;
}

Работещ Fiddle

person Benjamin    schedule 02.12.2014