列表项旁边的 HTML 按钮无法正确显示

Posted 2023-02-22

【中文标题】列表项旁边的 HTML 按钮无法正确显示

【英文标题】：HTML buttons do not display properly next to list items

【发布时间】：2020-01-16 06:43:51

【问题描述】：

我正在构建传统的待办事项列表应用程序，以增加我对 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>

App.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;
      
    
  

以下是按钮的显示方式。

【问题讨论】：

我建议使用 flex-box 而不是浮动。但是，如果您确实想坚持使用float，请尝试在模板中将<button> 标记移到<h2> 之前。

【参考方案1】：

你可以看到下面的代码。

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>