我以为 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 关注
- 101 浏览
添加回答
举报
0/150
提交
取消