Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Creating alternate list elements

Tags:

html

css

list

I'm trying to create a list style as shown in the below figure enter image description here

I tried to add the bordering but it's coming for the whole structure.

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

How can I change the my list to the image shown.

like image 255
MM0959 Avatar asked Sep 19 '17 08:09

MM0959


People also ask

How to list alternate element list in Python?

print ("The alternate element list is : " + str(res)) Output: The original list : [1, 4, 6, 7, 9, 3, 5] The alternate element list is : [4, 7, 3] Method #3 : Using Slice notation. This the most pythonic and elegant way to perform this particular task and enhances to the full power of python.

How to print all the alternate elements of a list?

Let’s discuss certain ways to print all the alternate elements of the given list. Shorthand to the naive method, list comprehension provides a faster way to perform this particular task. In this method, all the indices which are not multiple of 2, hence odd are inserted in the new list.

Is it possible to construct a list of alternate elements?

Some of the list operations are quite general and having shorthands without needing to formulate a multiline code is always required. Wanting to construct the list consisting of all the alternate elements of the original list is a problem that one developer faces in day-day applications.

How to get alternate elements from start to end in Python?

This the most pythonic and elegant way to perform this particular task and enhances to the full power of python. We can use the skip utility provided by slice to get the alternate elements from start to end in the list.


2 Answers

With some :after pseudo classes, it can be done:

Note that it needs some minor tweaking...

* { 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>
like image 85
LinkinTED Avatar answered Oct 13 '22 20:10

LinkinTED


Try this code

.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>
like image 39
Temani Afif Avatar answered Oct 13 '22 20:10

Temani Afif