我正在学习 CSS，但无法在附加按钮上使用 Flexbox 和 CSS Grid 获得所需的布局。
我正在同时练习 Flexbox 和 CSS Grid。问题是如果 HTML 文档已经包含按钮标签，则 CSS 可以正常工作。但是，CSS 不适用于使用 Javascript/dom 附加到 li 标记的按钮。 Flexbox 和 CSS 网格都发生了同样的问题。
// original HTML file used
<body>
<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul class="list">
<li class="bold red" random="23">Notebook</li>
<li>Jello</li>
<li>Spinach</li>
<li>Rice</li>
<li>Birthday Cake</li>
<li>Candles</li>
</ul>
<script type="text/javascript" src="script.js"></script>
</body>
我试图得到的结果是 li 元素(类似于前 2 个元素，notebook 和 jello)末尾的删除按钮，因此它在右侧都是合理的。
输入到列表中的任何新元素也不会按预期显示。请查看下面的附加链接。任何评论表示赞赏。
https://jsbin.com/febulokoru/edit?html,css,output
EDIT1: took a look at console again, realised the button was being appended to the textContent(inside the closing li tag). How do I move it out of li and append it after closing li tag?
最佳答案
嵌套网格可以用来解决布局问题。
而不是 appendChild，使用 insertAdjacentElement 方法，这样按钮就不会在 li 标签内
关于html - 使用 DOM/JS 将按钮附加到 <li> 标记但不确定如何使用 Flexbox/CSS Grid 正确显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54492023/