html - 列表项旁边的 HTML 按钮无法正确显示
问题描述
我正在构建传统的待办事项列表应用程序,以增加我对 Vuejs 的理解。大多数功能都按预期工作,但是我的待办事项没有正确显示。每个项目都应该有一个“删除”按钮,该按钮显示在其行的右侧,但这些按钮会渗入下面的行(见图)。
令我恼火的是复选框显示正确,但按钮却没有。我尝试将按钮的所有 css 更改为复选框的 css,但这不起作用
TodoItem.vue
<template lang="html">
<li class="todo-item" v-bind:class="{ 'is-complete': todo.completed }">
<div class="checkbox-holder">
<input type="checkbox" v-on:change="markComplete(todo.id)" />
</div>
<h2>{{ todo.title }}</h2>
<button v-on:click="deleteTodo(todo.id)" class="del">x</button>
</li>
</template>
应用程序.scss
.todos {
position: absolute;
display: block;
width: 656px;
background-color: white;
margin-left: 266px;
border-right: $generic-border;
min-height: calc(100vh);
padding-left: 40px;
padding-right: 40px;
padding-top: 80px;
padding-bottom: 80px;
@include mq("900px") {
margin-left: 0;
width: auto;
}
h2 {
font-size: 20px;
font-weight: normal;
}
&__list li {
line-height: 1.4;
color: #333;
font-size: 14px;
list-style-type: none;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 20px;
margin-top: 20px;
padding: 20px;
&.is-complete {
text-decoration: line-through;
}
button {
@include btn("30px");
float: right;
display: block;
}
.checkbox-holder {
margin-right: 20px;
margin-left: 20px;
align-items: center;
justify-content: center;
line-height: 16px;
float: left;
.checkbox {
cursor: pointer;
border-color: gray;
color: #343434;
height: 16px;
width: 16px;
border: 1px solid gray;
border-radius: 16px;
}
}
}
}
以下是按钮的显示方式。
解决方案
你可以看到下面的代码。
li {
display: flex;
align-items: center;
}
<ul>
<li class="todo-item">
<div class="checkbox-holder">
<input type="checkbox"/>
</div>
<h2>Hello world</h2>
<button>x</button>
</li>
</ul>
推荐阅读
- laravel - Laravel 在本地 ubuntu 20 中显示空白页
- python - BST-类似结构元素递归插入
- python - 如何在 django 中重置日期时间字段
- powershell - 在 PowerShell 中包含“`”(急性)字符时,类似字符串的比较失败
- c++ - g++ 10.3.0:误报还是实际问题?
- c# - 如何更新 Azure Durable Function 的 runtimeStatus?
- sql - 如何从 PySpark 中一个 DataFrame 的每一行生成然后减少大量 DataFrame?
- wordpress - 通过循环添加的自定义帖子类型之一未显示在仪表板上
- python - 我通常如何允许非文本元素包含空格“文本”?
- react-native - useEffect(与 redux useSelector hooks 的依赖关系)到自定义 hooks 中,它在每次导入时触发