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

Question

我有一个这样的列表：

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

用这个 CSS:

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

产生的输出如下所示 (jsfiddle):

我需要设置列表项目符号所在的背景样式，使其看起来像这样：

我试过在 UL 上设置边框，但这延伸到整个列表的底部（包括 "multi-line content" div），这不是我想要的外观。背景不应延伸到最后 "Label" 行底部以下。我正在寻找有关 CSS 技巧的建议来完成这项工作，或者寻找可以产生相同输出的替代 CSS/HTML 结构。该解决方案应该适用于任意数量的 <li> 元素，理想情况下是纯 CSS/HTML.

有什么想法吗？

Answer 1

这是一种不需要更改标记或高度声明的方法。

.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

给你：

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

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

jsfiddle

Answer 3

以下内容将为您提供所需的外观。您需要检查它是否适用于您的用户将使用的主要浏览器。

<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

您可以在 li 中添加另一个 div 并像这样使用它：

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:

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

我不知道这是否是您要找的，也许您只是想要一个更好的解决方案，但是这个 works.I 还在列表后面添加了一些段落来检查这是否破坏了布局.

看看这个FIDDLE

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

How to style the background of the bullet points in a <ul>?

html

css

html-lists