主页 / 问题 / 929955
Accepted
BrainSwitch
Asked:2020-01-09 16:41:23 +0000 UTC2020-01-09 16:41:23 +0000 UTC

div 组件中的位置

  • 772

有一个带有任务列表的小示例。

  1. 如何使删除任务的按钮位于右侧，但位于内部div.task-view，即 最大限度地（或几乎）靠近右边界div.task-view？
  2. 如何构图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>

这是一个示例的链接。

html

1 个回答

  1. Best Answer

    方法有很多，其中一种是将删除按钮及其相邻元素所在的容器制作为弹性容器。

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

    • 3

相关问题