javascript inputタグ

Question

イメージのように現状のコードだとずれてしまっています。テキストで送信したものをきれいに横一列でそろえたいのですがそどういう　cssで揃えることができますでしょうか

<div>
 <ul id="memos"></ul>
 </div>
<div class="memo">
<input typ

function memo() {
  const addTodoButton = document.querySelector('#add-button');
  addTodoButton.addEventListener('click', () => {
    const input = document.querySelector('#new-todo');
    const text = input.value;
    input.value = '';

    const newLi = document.createElement('li');
    newLi.innerText = text;
    const newButton = document.createElement('button');
    newButton.innerText = 'done';
    newLi.appendChild(newButton);
    newButton.addEventListener('click', () => {
      const li = newButton.closest('li');
      li.classList.add('done');
    });
    const ul =document.getElementById('memos');
    ul.appendChild(newLi);
  });
  }
    window.addEventListener('load',memo)

```css

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

Comments

[miyabi_pudding]

どういった形が望ましいか、理想の配置状態の画像をいただけないでしょうか？

Answer 1

こんにちは。

左寄せでいいのですよね？

サンプル

ul{
  width: max-content;
}
li{
  display: flex;
  justify-content: space-between;
}

---

参考：
max-content | width - CSS: カスケーディングスタイルシート | MDN

Comments

[ikikikoko]

ドンピシャで理想の形になりました