Как оформить данный список с помощью стилей?

Question

Не получается оформить с помощью стилей данный список, делаю через ul и li

<body>
    <h1>My To Do List</h1>

    <ul>
        <li>Hit the gym &times;</li>
        <li><span>Pay bills</span> &times;</li>
        <li>Meet John &times;</li>
        <li>Buy eggs &times;</li>
        <li><span>Read a book</span> &times;</li>
        <li>Organize office &times;</li>
        <li>Eat dinner &times;</li>
        <li>Buy apples &times;</li>
        <li>Meat George &times;</li>
        <li>Feed the cat &times;</li>
        <li> <span>Write a letter</span> &times;</li>
        <li>Run 1km &times;</li>
    </ul>
</body>

Answer 1

ul {
  list-style: none;
  padding: 0;
}

ul > li {
  padding: 5px 10px 5px 30px;
  box-sizing: border-box;
}

ul > li::before {
  display: inline-block;
  content: '\f0c8';
  margin-right: 10px;
  font-family: 'Font Awesome 5 Free';
  font-weight: 500;
}

ul > li:nth-child(odd) {background: #a5ccda;}
ul > li:nth-child(even) {background: #add8e6;}
ul > li.done {background: #e2e2e2;}

ul > li.done .name  {text-decoration: line-through;}
ul > li.done::before {content: '\f14a';}

ul > li .del {color: darkred;}

<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" />

<h1>My To Do List</h1>
<ul>
  <li>
    <span class="name">Hit the gym</span>
    <span class="del">&times;</span>
  </li>
  <li class="done">
    <span class="name">Pay bills</span>
    <span class="del">&times;</span>
  </li>
  <li>
    <span class="name">Meet John</span>
    <span class="del">&times;</span>
  </li>
  <li>
    <span class="name">Buy eggs</span>
    <span class="del">&times;</span>
  </li>
  <li class="done">
    <span class="name">Read a book</span>
    <span class="del">&times;</span>
  </li>
  <li>
    <span class="name">Organize office</span>
    <span class="del">&times;</span></li>
  <li>
    <span class="name">Eat dinner</span>
    <span class="del">&times;</span></li>
  <li>
    <span class="name">Buy apples</span>
    <span class="del">&times;</span></li>
  <li>
    <span class="name">Meat George</span>
    <span class="del">&times;</span></li>
  <li>
    <span class="name">Feed the cat</span>
    <span class="del">&times;</span>
  </li>
  <li class="done">
    <span class="name">Write a letter</span>
    <span class="del">&times;</span>
  </li>
  <li>
    <span class="name">Run 1km</span>
    <span class="del">&times;</span>
  </li>
</ul>

Answer 2

Советую воздержаться от тегов ul и li, которые имеют лишние стили у браузера.

Чтобы не выделялся текст для копирования по двойному клику: user-select: none

Чётные и нечётные элементы можно выделить через nth-child(odd) и nth-child(even)

Каждый input:checked с галочкой находит рядом + span элемент
и зачёркивает текст text-decoration: line-through;

body, html {

  width: 100%;
  height: 100%;
  user-select: none;
  
  margin: 0;
  padding: 16px;
  box-sizing: border-box;
}

list {

  display: flex;
  flex-direction: column;
}

list label {

  line-height: 32px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

list label:nth-child(odd) span { background: #a5ccda; }
list label:nth-child(even) span { background: #add8e6; }

list label input:checked + span {

  background: #e2e2e2;
  text-decoration: line-through;
}

list span {

  text-indent: 36px;
  width: 100%;
}

list span::before {

  content: '\00d7';
  position: absolute;
  right: 16px;
  color: red;
}

list label {

  position: relative;
}

list label input {

  position: absolute;
  left: 8px;
}

<h1>My To Do List</h1>

<list>
  <label><input type='checkbox'><span>Hit the gym</span></label>
  <label><input type='checkbox'><span>Pay bills</span></label>
  <label><input type='checkbox'><span>Meet John</span></label>
  <label><input type='checkbox'><span>Buy eggs</span></label>
  <label><input type='checkbox'><span>Read a book</span></label>
  <label><input type='checkbox'><span>Organize office</span></label>
  <label><input type='checkbox'><span>Eat dinner</span></label>
  <label><input type='checkbox'><span>Buy apples</span></label>
  <label><input type='checkbox'><span>Meat George</span></label>
  <label><input type='checkbox'><span>Feed the cat</span></label>
  <label><input type='checkbox'><span>Write a letter</span></label>
  <label><input type='checkbox'><span>Run 1km</span></label>
</list>

БЛОГ НА HUSL

Как оформить данный список с помощью стилей?

Ответы (2 шт):