Tạo yếu tố danh sách thay thế

Question

Tôi đang cố gắng để tạo ra một phong cách danh sách như thể hiện trong hình bên dưới

Tôi cố gắng thêm giáp nhưng nó đến cho toàn bộ cấu trúc.

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

Làm thế nào tôi có thể thay đổi danh sách của tôi cho hình ảnh hiển thị.

Answer 1

Với một số :after lớp giả, nó có thể được thực hiện:

Lưu ý rằng nó cần một số điều chỉnh nhỏ ...

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

Hãy thử mã này

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