創建備用列表元素

Question

我試圖創建一個列表樣式，如圖下圖

我嘗試添加的接壤，但它的到來爲整個結構。

.styled-list { 
 
    list-style: none; 
 
    max-width: 200px; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.styled-list li { 
 
    position: relative; 
 
    padding-left: 10px; 
 
} 
 
.styled-list li:before { 
 
    border-radius: 100%; 
 
    position: absolute; 
 
    content: ''; 
 
    height: 5px; 
 
    width: 5px; 
 
    top: 6px; 
 
    left: 0; 
 
} 
 
.styled-list li:nth-child(even) { 
 
    padding-right: 10px; 
 
    text-align: right; 
 
    padding-left: 0; 
 
} 
 
.styled-list li:nth-child(even):before { 
 
    left: auto; 
 
    right: 0; 
 
}

<ul class="styled-list"> 
 
    <li>List Item 1</li> 
 
    <li>List Item 2</li> 
 
    <li>List Item 3</li> 
 
    <li>List Item 4</li> 
 
    <li>List Item 5</li> 
 
    <li>List Item 6</li> 
 
    <li>List Item 7</li> 
 
    <li>List Item 8</li> 
 
</ul>

我怎麼能在我的名單更改爲顯示圖像。

Answer 1

隨着一些:after僞類，這是可以做到：

注意，它需要一些小的調整...

* { margin: 0; padding: 0; box-sizing: border-box; } 
 
.styled-list { 
 
    font-size: 1em; 
 
    list-style: none; 
 
    width: 500px; 
 
    border: 1px solid red; 
 
    position: relative; 
 
} 
 

 
.styled-list li { 
 
    width: 40%; 
 
    min-height: 3em; 
 
    line-height: 1em; 
 
    border: 1px solid grey; 
 
    padding: 1em; 
 
    position: relative; 
 
    margin-bottom: 1em; 
 
} 
 
/* move the odd items(expept the first) to the right */ 
 
.styled-list li:nth-child(2n+3) { 
 
    margin-left: 60%; 
 
} 
 
/* move the first item (head) to the center */ 
 
.styled-list li:first-child { 
 
    margin-left: 30%; 
 
    margin-right: 30%; 
 
} 
 
/* create the lines to the middle */ 
 
.styled-list li:nth-child(even):after, 
 
.styled-list li:nth-child(2n+3):before { 
 
    content: ' '; 
 
    border-top: 1px solid black; 
 
    position: absolute; 
 
    top: 50%; 
 
} 
 
/* line for the left items */ 
 
.styled-list li:nth-child(even):after { 
 
    left:100%; 
 
    right: -25%; 
 
    margin-right: -1px; /* compensate line width */ 
 
} 
 
/* line for the right items */ 
 
.styled-list li:nth-child(2n+3):before { 
 
    left: -25%; 
 
    right: 100%; 
 
    margin-left: -1px; /* compensate line width */ 
 
} 
 
/* horizontal line */ 
 
.styled-list:after { 
 
    content: ' '; 
 
    border-left: 1px solid black; 
 
    position: absolute; 
 
    top: 3em; 
 
    bottom: 2.5em; 
 
    left: 50%; 
 
    right: 0; 
 
    margin-bottom: 0; /* compensate line width */ 
 
}

<ul class="styled-list"> 
 
    <li>Head</li> 
 
    <li>List Item 1</li> 
 
    <li>List Item 2</li> 
 
    <li>List Item 3 with some more text inside it that can also be in three lines</li> 
 
    <li>List Item 4</li> 
 
    <li>List Item 5</li> 
 
    <li>List Item 6</li> 
 
    <li>List Item 7</li> 
 
    <li>List Item 8</li> 
 
</ul>

Answer 2

試試這個代碼

.styled-list { 
 
    position:relative; 
 
    list-style: none; 
 
    max-width: 200px; 
 
    padding: 0; 
 
    margin: 0 auto; 
 
} 
 

 
.styled-list:before { 
 
    position:absolute; 
 
    content:" "; 
 
    background:#000; 
 
    top:-10px; 
 
    bottom:10px; 
 
    right:50%; 
 
    width:2px; 
 
    margin-right:-1px; 
 
} 
 
.head { 
 
position: relative; 
 
    padding: 5px; 
 
    border:1px solid #000; 
 
    margin:0 auto 10px; 
 
    text-align:center; 
 
    max-width:100px; 
 
} 
 
.styled-list li { 
 
    position: relative; 
 
    padding: 5px; 
 
    border:1px solid #000; 
 
    display:inline-block; 
 
} 
 
.styled-list li:nth-child(even) { 
 
    margin-top:20px; 
 
    float:right; 
 
} 
 
.styled-list li:nth-child(even):after { 
 
    content:" "; 
 
    position:absolute; 
 
    width:18px; 
 
    height:2px; 
 
    left:-18px; 
 
    top:50%; 
 
    background:#000; 
 
} 
 
.styled-list li:nth-child(odd) { 
 
    margin-bottom:20px; 
 
} 
 
.styled-list li:nth-child(odd):after { 
 
    content:" "; 
 
    position:absolute; 
 
    width:18px; 
 
    height:2px; 
 
    right:-18px; 
 
    top:50%; 
 
    background:#000; 
 
}

<div class="head">Header</div> 
 
<ul class="styled-list"> 
 
    <li>List Item 1</li> 
 
    <li>List Item 2</li> 
 
    <li>List Item 3</li> 
 
    <li>List Item 4</li> 
 
    <li>List Item 5</li> 
 
    <li>List Item 6</li> 
 
    <li>List Item 7</li> 
 
    <li>List Item 8</li> 
 
</ul>