如何在苗条的列表中在日期和待办事项文本之间留出空间?

Question

我现在改变了这样的东西：https://svelte.dev/repl/f137b909d3e740f99a030576189091db?version=3.22.3

这是在斯维尔特，而且是新的。我正在用电子构建这个。 提前感谢！

Answer 1

我调整了你的风格，把todo-item-left做成一个网格。纯 CSS，无需其他更改：

.remove-item {
cursor: pointer;
}
.todo-item-left {
display: grid;
grid-template-columns: 1fr 3fr 3fr;
justify-items: start;
width: 100%;
}

我更新了 REPL 供您玩。

Answer 2

非常感谢@Gh05d

我只是在我的代码中更改了一些东西...在这个中，我希望按钮"ENTER"的功能与上面的输入字段相同，但不知道为什么它不起作用：

此按钮代码：

<div class="buttonDate">
<button on:click={newTodoTitle}>Enter</button>
</div>

https://svelte.dev/repl/f137b909d3e740f99a030576189091db?version=3.22.3