如何在项目中设置项目符号背景的样式 <ul> ？

Question

I have a list like this: 我有一个这样的清单：

<ul>
    <li class="list-item">
        <span>Label</span>
        <div class="multi-line-content">
            multi-<br />
            line<br />
            content
        </div>
    </li>
    <li class="list-item">
        <span>Label</span>
        <div class="multi-line-content">
            multi-<br />
            line<br />
            content
        </div>
    </li>
    <li class="list-item">
        <span>Label</span>
        <div class="multi-line-content">
            multi-<br />
            line<br />
            content
        </div>
    </li>
</ul>

with this CSS: 使用此CSS：

.list-item > * {
    vertical-align: top;
}
.multi-line-content {
    display: inline-block;
    border: 1px solid black;
}

which produces output that looks like this ( jsfiddle ): 产生的输出看起来像这样（ jsfiddle ）：

无样式的UL输出

I need to style the background where the list bullets are, such that it would look something like this: 我需要设置列表项目符号所在的背景的样式，以使其看起来像这样：

UL输出

I've tried setting a border on the UL, but this extends to the bottom of the whole list (including the "multi-line content" divs), which is not the desired look. 我曾尝试在UL上设置边框，但这延伸到整个列表的底部（包括“多行内容” div），这并不是理想的外观。 The background should not extend below the bottom of the last "Label" line. 背景不应延伸到最后“标签”行的底部以下。 I am looking for suggestions for CSS tricks to make this work, or alternative CSS/HTML structures that would produce the same output. 我正在寻找有关使之起作用的CSS技巧或会产生相同输出的替代CSS / HTML结构的建议。 The solution should work for any number of <li> elements, and ideally be pure CSS/HTML. 该解决方案应适用于任意数量的<li>元素，并且理想情况下应为纯CSS / HTML。

Any ideas? 有任何想法吗？

Answer 1

Here's an approach that doesn't require changes to your markup or height statements. 这是一种不需要更改标记或高度语句的方法。

 .list-item > * { vertical-align: top; } .multi-line-content { display: inline-block; border: 1px solid black; } li { border-left: 12px solid; } li:last-child { border: none; margin-left: 12px; } li > span { border-left: 12px solid; padding-left: 8px; margin-left: -12px; } ul { list-style-type: none; }

 <ul> <li class="list-item"> <span>Label</span> <div class="multi-line-content">multi- <br />line <br />content</div> </li> <li class="list-item"> <span>Label</span> <div class="multi-line-content">multi- <br />line <br />content</div> </li> <li class="list-item"> <span>Label</span> <div class="multi-line-content">multi- <br />line <br />content</div> </li> </ul>

Answer 2

Here you go: 干得好：

.list-item {
    border-left: 10px solid black;
    list-style: none;
    padding-left: 10px;
}

ul li:last-child{
   height: 15px;
}

jsfiddle 的jsfiddle

在此处输入图片说明

Answer 3

The following will give you the look you're after. 以下内容将为您提供所需的外观。 You'll need to check it works in key browsers your users will have. 您需要检查它是否可以在用户使用的关键浏览器中正常工作。

<html>
<head>
<style>
ul {
    list-style-type: none;
    padding-left: 5px;
    margin: 0px;
    background-color: black;
}

.list-item  {
    vertical-align: top;
    background-color: white;
}
.multi-line-content {
    display: inline-block;
    border: 1px solid black;
}
</style>
</head>
<body>
<ul>
    <li class="list-item">
        <span>Label</span>
        <div class="multi-line-content">
            multi-<br />
            line<br />
            content
        </div>
    </li>
    <li class="list-item">
        <span>Label</span>
        <div class="multi-line-content">
            multi-<br />
            line<br />
            content
        </div>
    </li>
    <li class="list-item">
        <span>Label</span>
        <div class="multi-line-content">
            multi-<br />
            line<br />
            content
        </div>
    </li>
</ul>
</body>
</html>

Answer 4

You can add another div in your li and work with it like this: 您可以在li添加另一个div，然后像这样使用它：

HTML HTML

<ul>
    <div class="a">
    <li class="list-item">
        <span>Label</span>
        <div class="multi-line-content">
            multi-<br />
            line<br />
            content
        </div>
        </li></div>

    <div class="a">
    <li class="list-item">
        <span>Label</span>
        <div class="multi-line-content">
            multi-<br />
            line<br />
            content
        </div>
        </li></div>

    <li class="list-item">
        <div class="b">
        <span>Label</span></div>
        <div class="multi-line-content">
            multi-<br />
            line<br />
            content
        </div>
    </li>
</ul>

CSS: CSS：

.list-item > * {
    vertical-align: top;

}
.list-item{ list-style-type: none;}


.a{border-left:5px solid red;padding-left:7px;}
.b{border-left:5px solid red;padding-left:7px;display: inline;}

.multi-line-content {
    display: inline-block;
    border: 1px solid black;
}

I don't know if this is what you're looking for, maybe you just want a fancier solution, but this works.I also have added some paragraphs after the list to check if this break the layout. 我不知道这是不是您要找的东西，也许您只是想要一个更好的解决方案，但这可行。我还在列表后添加了一些段落，以检查是否破坏了布局。

Have a look on this FIDDLE 看看这个FIDDLE

如何在项目中设置项目符号背景的样式 <ul> ？

问题描述

4 个解决方案

解决方案1
1 已采纳 2015-03-11 21:14:42

解决方案2
1 2015-03-11 21:17:39

解决方案3
0 2015-03-11 21:57:29

解决方案4
-1 2015-03-12 02:55:14

如何在项目中设置项目符号背景的样式 <ul> ？

问题描述

4 个解决方案

解决方案1 1 已采纳 2015-03-11 21:14:42

解决方案2 1 2015-03-11 21:17:39

解决方案3 0 2015-03-11 21:57:29

解决方案4 -1 2015-03-12 02:55:14

解决方案1
1 已采纳 2015-03-11 21:14:42

解决方案2
1 2015-03-11 21:17:39

解决方案3
0 2015-03-11 21:57:29

解决方案4
-1 2015-03-12 02:55:14