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

unstyled UL output

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

styled UL output

我已尝试在UL上设置边框，但这会扩展到整个列表的底部（包括＆＃34;多行内容＆＃34; div），这不是所需的外观。背景不应该延伸到最后一个＆＃34;标签＆＃34;的底部。线。我正在寻找CSS技巧的建议来做这项工作，或者替代的CSS / HTML结构将产生相同的输出。该解决方案适用于任意数量的<li>元素，理想情况下是纯CSS / HTML。

有什么想法吗？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你走了：

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

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

jsfiddle

enter image description here

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

我不知道这是否是您正在寻找的，也许您只是想要一个更好的解决方案，但这很有效。我还在列表后添加了一些段落来检查是否会破坏布局。

查看此FIDDLE

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

4 个答案: