将列表项与自定义CSS内容排在项目符号之前 [英] Align list items with custom CSS content before bullets

问题描述

我有这个HTML片段：

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

和CSS：

  .custom {
 list-style：none; 
 padding：0; 
 marg：0; 
} 
 .custom li：before {
 display：inline-block; 
 content：attr（data-bullet）; 
 width：50px; 
} 
 
 / * 
 .custom {
 list-style：none; 
 padding：0; 
 marg：0; 
} 
 .custom li：before {
 display：inline-block; 
 content：attr（data-bullet）; 
 position：relative; 
顶部：0; 
 left：-50px; 
} 
 .custom li {
 padding-left：50px; 
} 
 * / 
  

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

它在内容之前使用CSS的列表项，以便创建自定义列表编号。问题是，如果列表项的内容长于一行，则文本的对齐方式不能正常工作。

有一种方法可以对齐内容的线路正确？我已经尝试定位内容相对，并给列表项填充（见注释掉css示例），但这也不工作。

解决方案

尝试将整个div上的边距偏移之前的宽度，然后在之前 code>之后。

像这样：

  .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>项目1< / li> < li data-bullet =aa>项目2< / li> < li data-bullet =ab>项目3.1< br />项目3.2< / li> < li data-bullet =c>项目4< / li> < li data-bullet =d>项目5< / li> < li data-bullet =de>项目6< / li>< / ul>  

b
$ b

您也可以使用定位功能，但是您可能会影响其他元素受到影响。

I have this snippet of 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>

and 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/

It uses CSS before content of list items in order to create a custom list numbering. The problem is that the alignment of the text doesn't work properly if the content of the list item is longer than a single line.

Is there a way to align the content of the lines properly? I already tried to position the content relative and giving the list items a padding (see commented out css in example) but this doesn't work either.

解决方案

Try offsetting the margin on the entire div by the width of the before and then take the margin off on the before after.

Like this:

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

You can alternatively do it with positioning but you may hit snags with other elements being affected.

这篇关于将列表项与自定义CSS内容排在项目符号之前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！