Расположение в компоненте div

31 июля 2019, 10:40

Есть небольшой пример со списком задач.

Как сделать, чтобы кнопки для удаления задачи были справа, но внутри div.task-view, т.е. были максимально(или почти) приближены к правой границе div.task-view?
Как обвести в рамку div.task-view?

body{ 
  max-width: 300px; 
  margin-left: 30%; 
  margin-right: 30%; 
} 
 
li { 
  list-style-type: none; 
} 
 
ul { 
  padding-left: 0; 
} 
.task-view label{ 
  display: inline; 
} 
 
.remove-task { 
  background: none; 
  border: none; 
}

<header>Todo</header> 
<div class="add-task"> 
  <input type="text"/> 
  <button> 
    add task 
  </button> 
</div> 
<ul> 
  <li> 
    <div class="task-view"> 
      <input type="checkbox"/> 
      <label>One</label> 
      <button class="remove-task">X</button> 
    </div> 
  </li> 
  <li> 
    <div class="task-view"> 
      <input type="checkbox"/> 
      <label>Two</label> 
      <button class="remove-task">X</button> 
    </div> 
  </li> 
</ul>

Вот ссылка на пример.

Answer 1

Способов много, один из них - сделать контейнер в котором лежит кнопка удаления и соседние с ней элементы флекс контейнером.

.task-view {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

После этого внутри этого контейнера будут работать правила разметки по флекс боксам. Теперь можно для кнопки задать отступ слева со значением auto, что отодвинет её максимально вправо.

.remove-task {
   margin-left: auto;
 }

Ну а рамка просто задаётся таким образом, толщину и цвет, само собой можно менять:

.task-view {
  border: 1px solid cornflowerblue;
}

cornflowerblue - это просто название цвета. Можно использовать любой другой цвет, например #c2c2c2 или red.

body { 
  max-width: 300px; 
  margin-left: 30%; 
  margin-right: 30%; 
} 
 
li { 
  list-style-type: none; 
} 
 
 
/*Даём отступ вниз в 10px всем li, кроме последнего*/ 
li:not(:last-of-type) { 
  margin-bottom: 10px; 
} 
 
ul { 
  padding-left: 0; 
} 
 
 
/*Делаем из task-view флекс-контейнер*/ 
.task-view { 
  display: flex; 
  flex-direction: row; 
  justify-content: flex-start; 
  align-items: center; 
  border: 1px solid cornflowerblue; 
} 
 
.task-view label { 
  display: inline; 
} 
 
 
/*С помощью margin-right: auto; отодвигаем крестик вправо.*/ 
.remove-task { 
  background: none; 
  border: none; 
  margin-left: auto; 
}

<header>Todo</header> 
<div class="add-task"> 
  <input type="text" /> 
  <button> 
    add task 
  </button> 
</div> 
<ul> 
  <li> 
    <div class="task-view"> 
      <input type="checkbox" /> 
      <label>One</label> 
      <button class="remove-task">X</button> 
    </div> 
  </li> 
  <li> 
    <div class="task-view"> 
      <input type="checkbox" /> 
      <label>Two</label> 
      <button class="remove-task">X</button> 
    </div> 
  </li> 
</ul>