我以為 span會對齊元素，但按鈕出現在 p 元素下方。for (let i = 0; i < arr.length; i++) { main.innerHTML += ` <span> <p onclick="border(${i})">${arr[i].name}</p> <button>Delete</button> </span>`}
2 回答
拉風的咖菲貓
TA貢獻1995條經驗 獲得超2個贊
p元素是塊級元素，可以設置display屬性inline-block。
演示：
var arr = [{name: "test"}]
var main = document.getElementById("main");
for (let i = 0; i < arr.length; i++) {
? main.innerHTML += `
? <span>
? ? <p onclick="border(${i})" style="display:inline-block">${arr[i].name}</p>
? ? <button>Delete</button>
? </span>`;
}
<div id="main"></div>
有只小跳蛙
TA貢獻1824條經驗 獲得超8個贊
如果你想擁有p并button內聯，只需交換，p就像span我在下面所做的那樣。你也可以查看我的截圖
document.addEventListener("DOMContentLoaded", () => {
let main = document.querySelector('body');
let arr = [{name: 'first'},{name: 'second'}];
for (let i = 0; i < arr.length; i++) {
main.innerHTML += `
<p>
<span onclick="border(${i})">${arr[i].name}</span>
<button>Delete</button>
</p>
`;
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
- 2 回答
- 0 關注
- 144 瀏覽
添加回答
舉報
0/150
提交
取消