Question

我在javascript中创建了一个待办事项应用程序，该应用程序添加了一个新的待办事项并将其删除：

function addTodo() {
    var item = document.getElementById('input').value;
    var text = document.createTextNode(item);
    var newItem = document.createElement('li');
    newItem.appendChild(text);
    document.getElementById('todoList').appendChild(newItem);

    var removeTask = document.createElement('img');
    removeTask.setAttribute('src', '/images/trash.jpg');
    removeTask.setAttribute('id', 'trash');

    removeTask.addEventListener('click', function() {
        newItem.parentNode.removeChild(newItem);
    });
    newItem.appendChild(removeTask);
}

这是html：

<!DOCTYPE html>
<html>
<head>
    <title>Todo list</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <header>
    <form>
    <input type="text" id="input" placeholder="Enter an activity..">
    <button type="button" onclick="addTodo()" class="add-button">+</button>
    </form>
</header>
  <ol id="todoList">
  </ol>
    <script src="./scripts/index.js"></script>
</body>
</html>

创建新项目时，它会添加该项目和一个垃圾桶，该垃圾桶会删除Todo，但是从照片中可以看到，该垃圾桶img比文本高一点，我希望它们都对齐完美，而不是将垃圾桶图标调得更高。如何使用CSS做到这一点？我试图将其显示为块状，以将边距顶部和位置设置为相对，但仍然无法正确设置

Answer 1

检查是否有帮助： Align image and text properly in HTML

并将其应用于您的<img>元素

中心DOM在li内部创建图像

1 个答案: