Я просто играю с HTML и пытаюсь составить список дел. Мой HTML выглядит следующим образом:
<h1>To Do List</h1>
<div class="header">
<input type="text" placeholder="New Task..." name="task" id="task" class="task" autocomplete="off">
<span onclick="newElement()" class="addBtn">Add</span>
</div>
<ul id="myUL"></ul>
<script src="script/js.js"></script>
Это моя стартовая страница
После того, как я добавил новое задание, у меня есть этот
Это один li -элемент. Поэтому я добавил display: flex и justify-content: space-between. Таким образом, текст слева и кнопка закрытия справа.
Теперь я также могу проверить задачу, которую уже выполнил. Это выглядит так
Поскольку я создаю этот флажок, у меня теперь есть три элемента в моем li -элементе. Таким образом, имя задачи центрировано. То, что я хочу сейчас, это иметь интервал между проверенным символом и именем задачи. Кнопка закрытия должна быть все еще на правой стороне.
Я играл с justify-content для своих li -элементов и .close -класса. Я думал, что смогу создать li -элемент flex-start и .close -класс flex-end. Вот что я придумаю:
Можно ли достичь моей цели с помощью флексбоксов? Если да, как я могу это сделать? Вот полный css -файл, я играл некоторое время, поэтому многие части из css не нужны, пожалуйста, игнорируйте их.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #F2994A; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #F2C94C, #F2994A); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #F2C94C, #F2994A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
margin-top: 30px;
font-family: sans-serif;
color: black;
}
h1{
color: white;
}
.header{
width: 40%;
background-color: white;
margin-top: 20px;
padding: 15px;
display: flex;
flex-direction: row;
}
.task{
width: 100%;
overflow: hidden;
border: none;
}
.addBtn{
text-align: right;
border: none;
background: white;
cursor: pointer;
height: 100%;
}
ul{
padding-top: 20px;
list-style: none;
width: 40%;
align-content: center;
}
li{
width: 100%;
font-size: 1.3em;
color: #2f4f4f;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-left: 15px;
}
.close {
position: relative;
text-align: right;
align-content: right;
justify-content: space-end;
right: 0;
top: 0;
padding: 12px 20px 12px 20px;
}
.close:hover {
background-color: #f44336;
color: white;
cursor: pointer;
}
ul li:hover{
background: #ddd;
}
/* When clicked on, add a background color and strike out text */
ul li.checked {
background: #888;
color: #fff;
justify-content: flex-start;
}
/* Add a "checked" mark when clicked on */
ul li.checked::before {
content: '';
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
align-content: center;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
РЕДАКТИРОВАТЬ: Рабочая демо .