對齊列表項

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），但這也不起作用。

Answer 1

嘗試抵消整個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>

您也可以與定位做，但你可能會碰到與被影響的其他因素障礙。

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> 

Answer 3

您可以從您的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; 
} 

Working Fiddle