Nested lists with full-size border and indented
I am trying to achieve the following result:
So far I have written the following:
a {
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
border-top: 1px solid;
border-bottom: 1px solid;
padding-left: 1em;
line-height: 2em;
}
li li {
margin-left: -1em;
padding-left: 2em;
border-bottom: none;
}
li li li {
margin-left: -2em;
padding-left: 3em;
border-bottom: none;
}
Demo: https://jsfiddle.net/9h891a0s/1/
However, I am looking for a solution that will allow infinite depth. Is there a clean solution for this?
+3
source to share
3 answers
Take a look at this with position:absolute
border tricks .
body {
margin: 0;
padding: 1em;
}
body > ul {
border-bottom: 1px solid black;
overflow: hidden;
}
a {
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
line-height: 2em;
position: relative;
}
li ul {
padding-left: 1em;
}
li:after {
content:"\00A0";
position: absolute;
width: 200%;
left: -100%;
top: 0;
border-top: 1px solid black;
z-index: -1;
}
<ul>
<li><a href="#">Level 1</a>
<ul>
<li><a href="#">Level 2</a></li>
<li>
<a href="#">Level 2</a>
<ul>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
</ul>
</li>
<li><a href="#">Level 2</a></li>
</ul>
</li>
</ul>
Screenshot Demo: http://jsfiddle.net/Lr5cmoo6/
+3
source to share
Cannot increase field size / add element by nesting.
May this help you:
a {
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
border-top: 1px solid;
border-bottom: 1px solid;
line-height: 2em;
}
li li {
border-bottom: none;
}
li li a {
margin-left: 1em;
}
li li li a {
margin-left: 2em;
}
li li li li a {
margin-left: 3em;
}
+1
source to share
You can fake borders by applying repeating linear-gradient
as the top-level background ul
. Then you just need to create a single rule for the list items in order to install the add-on.
Here's an example:
body{
font-family:arial;
font-size:14px;
margin:0;
}
body>ul{
background:linear-gradient(0deg,#000 3.333%,#fff 3.333%);
background-size:100% 30px;
}
ul{
margin:0;
padding:0;
list-style-type:none;
}
li{
line-height:30px;
padding:0 1em;
}
<ul>
<li><a href="#">Level 1</a>
<ul>
<li><a href="#">Level 2</a></li>
<li>
<a href="#">Level 2</a>
<ul>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
</ul>
</li>
<li><a href="#">Level 2</a></li>
</ul>
</li>
</ul>
+1
source to share