待办事项列表中的某些任务不显示删除按钮

我制作了一个待办事项应用程序,但您无法删除某些项目。我尝试了很多东西,但它不起作用。你能帮我理解错误的原因吗?我也在想办法增加字符限制。


html:


<!DOCTYPE html>

<!-- Created By Zarif Sefat -->

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>SideQuests | Simple Todo App</title>

    <link rel="stylesheet" href="style.css">

    <script src="https://kit.fontawesome.com/a076d05399.js"></script>

    <link rel="icon" href="images/icon.png">

</head>

<body>

  <h1 class="logo-or-something"><i class="fas fa-check-square"></i> SideQuests</h1>

  <div class="wrapper">

    <header>SIDE QUESTS</header>

    <div class="inputField">

      <input type="text" placeholder="Add your new side quest">

      <button><i class="fas fa-plus"></i></button>

    </div>

    <ul class="todoList">

      <!-- data are comes from local storage -->

    </ul>

    <div class="footer">

      <span>You have <span class="pendingTasks"></span> pending side quests</span>

      <button>Clear All</button>

    </div>

  </div>


  <script src="script.js"></script>


</body>

</html>


心有法竹
浏览 118回答 1
1回答

一只甜甜圈

如果你从你的 CSS 中删除它:.todoList li{&nbsp; overflow: hidden;}而且你会输入一个很长的输入,你就会看到问题出在哪里。并不是按钮不显示,而是按钮出现了。当你的div太长时,按钮不会出现在同一行,而是较低,导致你看不到它。要解决这个问题,您可以添加以下内容(隐藏的溢出已经存在):.todoList li{&nbsp; overflow: hidden;&nbsp; white-space: nowrap;&nbsp; text-overflow: ellipsis;}设置hoverflow:hidden不允许您滚动,但整个文本仍然存在。另外两行将使 css 在没有更多空间时剪切文本。这将使您的按钮出现在正确的位置。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript