Question

我想将无序列表中的项目符号点更改为扩展列表项整个深度的颜色块，即使列表项包含多行也是如此。单个列表项的所有包装行需要在相同深度缩进。

我正在寻找的最终效果是列表旁边的一条长色线

目前我使用的图像设置为与单个列表行相同的深度，但这显然不包括多行。它还在它们之间放置一个小的换行符，如果列表项包装，则包装的文本位于项目符号下面

这是我目前的css

.content-main ul li {
  line-height: 1em;
  float:left;
  text-align:left;
  vertical-align:text-bottom;
  display:list-item;
  list-style-image: url('images/bullet.gif');
  list-style-position:inside;
}

对此的任何指示都非常感激

Answer 1

您必须切换到容器（div, span）或类似的东西。

<div>
  first
  <div>
     second
     <div>
     third 
     </div>
  </div>
</div>

的CSS：

div {border-left：1px solid red}

这将生成从项目到列表末尾的行。

请参阅我的JSFiddle示例http://jsfiddle.net/G82eQ/

编辑：再次阅读您的帖子，只显示每个项目的一行 - 导致列表左侧有一个长行，请参阅http://jsfiddle.net/vENx3/

添加一块颜色作为<li>项目项目符号</li>

1 个答案: