如何将这些列表元素与某些按钮对齐？

2024-05-19 • 问答

我想将通过Javascript创建的一些列表元素与其对应的按钮对齐。每当我向列表中添加新元素时，文本的位置就会比“ X / Remove element”按钮的位置低。你能告诉我我在做什么错吗？

您可以在这里检查笔：

https://codepen.io/Watashi10/pen/RwwQegr

理想的做法是将list元素和X按钮放在“ input”元素下的同一行或同一高度。

HTML：

<body>
    <div class="container d-flex align-items-center h-100">
        <div class="row">
            <header class="text-center col-12">
                <h1 id="header">My Shopping List</h1>
            </header>
            <input class="text-center col-6" id="userinput" type="text" placeholder="add items">
            <section class="row">
                <button id="enter">Enter</button>
            </section>
            <div class="text-center col-12" id="shopping">
                <ul class="list" style="list-style: none">
                </ul>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="script.js"></script>
</body>

CSS：

body,html {
  width: 100%;
  height: 100%;
  font-family: 'Fjalla One',sans-serif; 
  background: url("https://wallpaperplay.com/walls/full/5/6/5/68320.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 15vw;
  margin: 0 auto;
  min-height: 50vh;
}

.row {
  display: flex;
  justify-content: center;
  flex-direction: row;
}


#header {
  display: inline-block;
  position: relative;
  bottom: 200px;
  font-family: 'Fredericka the Great';
  font-size: 5rem;
  color: white;
}

input {
  flex-grow: 5rem;
  border: none;
  padding: 25px;
}

button {
  border: 1px solid;
  background: blue;
  color: white;
}

input,button {
  position: relative;
  bottom: 50px;
}

.userinput {
  float: left;
}

h2 {
  font-family: 'Fredericka the Great';
  color:#FFB6C1;
  font-size: 12px;
}

ul li {
  padding: 3rem;
  font-family: 'Fredericka the Great';
  font-size: 25px;
  color:  #ffffff;
}

.done {
  text-decoration: line-through;
}

我将不胜感激。谢谢！

移除底部：50像素

input,button {
  position: relative;
  bottom: 50px; //remove this
}

，或者如果您希望输入的底部为50px，将它们的css样式分开。

input {
  position: relative;
  bottom: 50px;
}
button {
  position: relative;
  margin-left: 15px !important; //just to make it a little nicer
}

因此，您要在此处的用户输入框中创建一个textnode：

li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
    input.value = "";

我建议将其设置为div或p或其他可以设置样式的东西。像这样：

let inputValue = document.createElement('div');
inputValue.innerHTML = input.value;
li.prepend(inputValue)
    input.value = "";

所以您的结构应该看起来像这样：

<li>
  <div class="value"></div>
  <button></button>
</li>

在那之后，有很多方法可以将它们内联。您可以将li设置为具有display: flex的样式，也可以将button浮动到li中的右侧。但是我首先要使您捕获的值并在li中添加一些除了textNode之外的东西。

如何将这些列表元素与某些按钮对齐？

iceman4019 回答：如何将这些列表元素与某些按钮对齐？

大家都在问