我试图在输入框下对齐 ul lis 并将 span 元素发送到输入框的右侧
我阅读了其他主题以及如何使用 justify-content: space-between; 将跨度发送到左侧；但这也不想工作。还尝试在列表中添加边距以插入文本，但感觉不对，更不用说我仍然无法弄清楚如何将删除跨度保持在右侧。这是我的 jsfiddle https://jsfiddle.net/h0w6yp1x/
.list { justify-content: space-between;}
.list li { justify-content: space-between;}
最佳答案
在 li 标签之间定义一个包装器 div。并使其成为 flexbox，然后证明这个包装 div 的内容。
像这样:
<li>
<div class="li-wrapper"> Random Text1 <span class="btn-remove">delete</span></div>
</li>
工作代码如下:
const DOM = {
input: document.querySelector('.user-input'),
list: document.querySelector('.list'),
btnAdd: document.querySelector('.btn-add'),
btnDelete: document.querySelector('.btn-remove')
}
let addItem = function() {
if (DOM.input.value === '') {
return;
} else {
const html = `<li> <div class="li-wrapper">${DOM.input.value} <span class="btn-remove">delete</span></div> </li>`;
DOM.list.insertAdjacentHTML('beforeend', html);
DOM.input.value = '';
}
};
let removeItem = function(element) {
element.parentNode.parentNode.removeChild(element.parentNode);
}
DOM.btnAdd.addEventListener('click', function() {
addItem();
});
DOM.list.addEventListener('click', function(e) {
let element = e.target;
if (e.target && e.target.matches("span.btn-remove")) {
removeItem(element);
}
})* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
font-family: 'Roboto', sans-serif;
height: 100%;
background: #d53369;
/* fallback for old browsers */
background: -webkit-linear-gradient(to bottom right, #cbad6d, #d53369);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom right, #cbad6d, #d53369);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background-repeat: no-repeat;
background-attachment: fixed;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 100px auto;
width: 360px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3)
}
.container h1 {
text-align: center;
}
.user-inerface {
display: flex;
justify-content: center;
align-items: center;
}
.user-input {
border: none;
padding: 5px;
}
.btn-add {
border: none;
padding: 5px;
}
.list {
border: 2px solid black;
width: 100%;
text-decoration: none;
list-style: none;
display: flex;
flex-direction: column;
line-height: 20px;
color: #9400D3;
}
.li-wrapper {
display: flex;
justify-content: space-between;
}
.list li:nth-child(2n+2) {
opacity: 0.8;
}
.list li:hover {
opacity: 0.7;
}<!DOCTYPE html>
<html lang="en">
<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">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<h1>Todos</h1>
<div class="user-interface">
<input type="text" class="user-input" placeholder="New todo">
<button class="btn-add">Add</button>
</div>
<ul class="list">
<li>
<div class="li-wrapper"> Random Text1 <span class="btn-remove">delete</span></div>
</li>
<li>
<div class="li-wrapper"> Random Text1 <span class="btn-remove">delete</span></div>
</li>
<li>
<div class="li-wrapper"> Random Text1 <span class="btn-remove">delete</span></div>
</li>
<li>
<div class="li-wrapper"> Random Text1 <span class="btn-remove">delete</span></div>
</li>
</ul>
</div>
<script src="main.js"></script>
</body>
</html>关于css - 将输入框下的列表项与 flexbox 对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57501705/