在项目符号前使用自定义CSS内容对列表项进行对齐

Question

我有这段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），但这也不起作用。

- Werzi2001

Answer 1

尝试通过将整个 div 的 margin 偏移 before 的宽度，然后在 before 之后去掉 margin。

像这样：

.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>

你也可以使用定位来实现，但是可能会影响其他元素。

- Stewartside

Answer 2

希望这是你正在寻找的内容。 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>

- Bijomon Varghese

Answer 3

你可以从 li 元素中删除宽度 before，并为你的 li 使用 padding-left 和 position: relative，使你的 :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

- Benjamin