The Problem
在HTML中，我的编辑和删除按钮之间有默认间距.但是，当我用具有完全相同的 struct 和类名的JavaScript追加一个新的列表项时，这些按钮之间没有空格.
Desired Behavior个 以使附加的按钮与HTML标记中的"默认"按钮显示相同.
HTML个
<ul id="list">
<li class="item">
<div>Milk</div>
<button class="edit-button">edit</button>
<button class="delete-button">X</button>
</li>
<li class="item">
<div>Cheerios</div>
<button class="edit-button">edit</button>
<button class="delete-button">X</button>
</li>
<li class="item">
<div>Cheese</div>
<button class="edit-button">edit</button>
<button class="delete-button">X</button>
</li>
</ul>
CSS
.title {
text-align: center;
}
.main {
border: 1px solid black;
width: 50%;
margin: auto;
}
#add-item {
border: 1px solid black;
}
.input {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.label {
margin: 10px;
}
#list {
flex-direction: column;
display: flex;
}
#list > li{
list-style-type: none;
margin: 10px auto;
}
#list div {
margin-bottom: 10px;
text-align: center;
}
/* #list button {
margin: 0px 4px;
} */
Javascript个
// TODO: Grab the list
const shoppingList = document.getElementById("list")
// TODO: Grab the input field
const titleInput = document.getElementById("title")
// TODO: Grab the buttons.
const submitButton = document.getElementById("submit-item")
// const editButtons = document.querySelectorAll(".edit-button")
// const delButtons = document.querySelectorAll(".delete-button")
// TODO: Add click event to the button.
submitButton.addEventListener('click', (e) => {
e.preventDefault()
addItem(titleInput.value)
});
// TODO: Create a function to add item.
// ! Requirement: Must have:
// ! - item text
// ! - edit button
// ! - delete button
// ! - input field
// ! Requirement: Add event listeners to buttons
// TODO: Edit button must get pass the Parent node.
function addItem(title) {
console.log("Running addItem")
let newItem = document.createElement("li")
newItem.classList.add("item")
let newTitle = document.createElement("div")
newTitle.textContent = title
let editBtn = document.createElement("button")
editBtn.classList.add("edit-button")
editBtn.innerText = "edit"
let delBtn = document.createElement("button")
delBtn.classList.add("delete-button")
delBtn.innerText = "X"
editBtn.addEventListener('click', (e) => {
console.log("Pressed the edit button", e)
editItem(e.target.parentElement)
});
newItem.appendChild(newTitle)
newItem.appendChild(editBtn)
newItem.appendChild(delBtn)
shoppingList.appendChild(newItem)
}
// TODO: Create a function to edit item.
// ! Requirement: Parent Node (Element) parameter
// TODO: Remove the Edit, Delete buttons.
// TODO: Grab text content of the div and assign to variable.
// TODO: Add an input element to the parent node.
// TODO: Set input's value to the variable with the text content.
// TODO: Add the save button.
function editItem(listItem) {
let title;
listItem.childNodes.forEach(element => {
console.log(element.tagName)
if(element.tagName === "DIV") {
title = element.innerText
}
});
listItem.innerHTML = ""
let editInput = document.createElement("input")
editInput.value = title
let saveBtn = document.createElement("button")
saveBtn.classList.add("save-button")
saveBtn.innerText = "save"
listItem.append(editInput, saveBtn)
saveBtn.addEventListener('click', (e) => {
saveItem(e.target.parentNode)
});
}
// TODO: Create a function to save item.
// ! Requirement: Parent Node (Element) parameter
// TODO: Get the value of the input field and assign to variable
// TODO: Remove the input and save button.
// TODO: Create the div, edit, and delete buttons.
// TODO: Set the div's text content to the variable with the input's value.
// TODO: Add all those elements to the parent element.
function saveItem(listItem) {
let titleEdit;
listItem.childNodes.forEach(element => {
if(element.tagName === "INPUT") {
titleEdit = element.value
}
});
listItem.innerHTML = "";
let changedTitle = document.createElement("div");
changedTitle.textContent = titleEdit;
let editBtn = document.createElement("button");
editBtn.classList.add("edit-button");
editBtn.innerText = "edit";
let delBtn = document.createElement("button");
delBtn.classList.add("delete-button");
delBtn.innerText = "X";
listItem.appendChild(changedTitle);
listItem.appendChild(editBtn);
listItem.appendChild(delBtn);
}
// TODO: Create a function to delete item.
// ! Requirement: Parent Node (Element) paramter
// I believe you can figure this one out yourself. <3 :)
What I've Tried
- 但是，在按钮中添加样式后，附加列表项中的按钮之间的间距仍然减小.(我希望它可能会解决这个问题，如果按钮有样式应用，这将是正确的间距为所有他们.HTML元素有4px的间距，但看起来追加的元素有2px的间距.
- 已判断多个浏览器以查看浏览器的呈现方式是否不同，但是，间隔错误在所有浏览器中都存在.(我希望在其中一个浏览器中看到正确的版本，以确定这是否是浏览器之间的渲染问题.)
- 我try 了一个CSS重置，结果是HTML按钮之间的默认间距和附加按钮之间没有间距.(我期待CSS重置以删除按钮之间的所有间距，但它似乎具有codepen中所示的默认效果.
- 我try 将我的代码放在CodePen环境中，但仍然遇到了同样的问题.(如果我的当地环境出现问题，我预计它会起作用.)
- 我判断了代码，可能是回车空格/回车，但我什么也没找到.(我预计隐藏的空间可能是原因，移除它会产生预期的结果.)
- 我甚至问过我的教练，他们也不确定.(他们告诉我，作为一种解决办法，只删除默认的列表项，但我发帖是因为我真的很好奇为什么会发生这种情况.)
StackOverflow Articles I've Looked At (我试着链接这些，但它说这些链接使我的问题看起来像"垃圾邮件"-所以，这里的标题.
为什么初始的CSS样式在DOM元素样式字段中不可见？
这里讨论的是访问样式的css属性与访问完全呈现的css属性之间的问题.这并不真正适用，因为在本例中默认情况下没有任何样式.
缺少样式的隐藏元素
样式不是缺失的，它们是应用的，但是相同的样式在附加的元素之间以不同的方式apply.
在HTML CSS中删除按钮之间的空格
我进行了一次css重置，但问题仍然存在.此外，这是水平间距，而不是垂直间距.
我可以在列表项中使用DIV吗？
判断HTML struct 是否有效，并且根据HTML规范，我可以在li中包含div和其他块级元素.
隐藏的内容无法获得正确的css效果
这个人有一个问题，div被附加在UL元素内部，并导致事情破裂.这不是我的问题
使用缩进间距将元素映射到DOM
这个特别的问题是附加的DIV的HTML struct 格式不正确.我也不会有这个问题.我的HTML struct 在开发工具中似乎完全相同.
在JavaScript中追加元素时出现奇怪错误
此特定问题遇到类型错误.控制台中没有错误.这似乎是一个奇怪的格式化/css错误.
这些文章似乎都不适用于这个特殊的问题.我不确定这是不是一个错误，但考虑到这主要是默认样式，跨浏览器持久存在，即使添加了样式也会持久存在.我不知所措.