如何在項目中設置項目符號背景的樣式 <ul> ？
[英]How to style the background of the bullet points in a <ul>?
問題描述
我有一個這樣的清單：
<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上設置邊框，但這延伸到整個列表的底部（包括“多行內容” div），這並不是理想的外觀。 背景不應延伸到最后“標簽”行的底部以下。 我正在尋找有關使之起作用的CSS技巧或會產生相同輸出的替代CSS / HTML結構的建議。 該解決方案應適用於任意數量的<li>元素，並且理想情況下應為純CSS / HTML。
有任何想法嗎？
4 個解決方案
解決方案1
1 已采納 2015-03-11 21:14:42
這是一種不需要更改標記或高度語句的方法。
.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>
解決方案2
1 2015-03-11 21:17:39
干得好：
.list-item {
border-left: 10px solid black;
list-style: none;
padding-left: 10px;
}
ul li:last-child{
height: 15px;
}
解決方案3
0 2015-03-11 21:57:29
以下內容將為您提供所需的外觀。 您需要檢查它是否可以在用戶使用的關鍵瀏覽器中正常工作。
<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>
解決方案4
-1 2015-03-12 02:55:14
您可以在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
CSS<ul> 要點將不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.