Я изучаю CSS, но не могу получить желаемый макет, используя Flexbox и CSS Grid на вложенных кнопках.
Я практикую и Flexbox, и CSS Grid одновременно.Проблема в том, что если в HTML-документе уже есть теги кнопок, CSS работает нормально.Однако CSS не работает с кнопками, добавленными к тегу li с использованием Javascript / dom.Одинаковые проблемы возникают как с 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 (аналогично первым двум элементам, блокноту и 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?