我正在开发一个使用角度的应用程序;我的问题是我必须创建一个像上传图片中的结构,但我无法弄明白;
我已经尝试过列表样式和伪类,但它没有解决它;
.mod-ul li::before {
content: "L";
color: #88c4e6;
position: relative;
left: 0;
top: -4px;
font-size: 25px;
}
您可以执行以下操作:
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
ul {
padding-left: 1em;
}
ul ul li {
padding-left: 1em;
border: 1px solid black;
border-width: 0 0 1px 1px;
}
li.container {
border-bottom: 0px;
}
li.empty {
font-style: italic;
color: silver;
border-color: silver;
}
li p {
margin: 0;
background: white;
position: relative;
top: 0.5em;
}
ul ul li ul {
border-top: 1px solid black;
margin-left: -1em;
padding-left: 2em;
}
ul ul li:last-child ul {
border-left: 1px solid white;
margin-left: -17px;
}
<ul class="parent">
<li class="container">
<p>Testing </p>
<ul>
<li>
<p>Testing 1</p>
</li>
<li>
<p>Testing 2</p>
</li>
<li class="container">
<p>Testing </p>
<ul>
<li>
<p>Testing 1</p>
</li>
<li>
<p>Testing 2</p>
</li>
<li>
<p>Testing 3</p>
</li>
</ul>
</li>
</ul>
</li>
<li class="container">
<p>Testing </p>
<ul>
<li>
<p>Testing 1</p>
</li>
<li>
<p>Testing 2</p>
</li>
<li>
<p>Testing 3</p>
</li>
</ul>
</li>
<li class="container">
<p>Testing </p>
<ul>
<li class="empty">
<p>empty</p>
</li>
</ul>
</li>
</ul>