色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

造型問(wèn)題.數(shù)字正射影像圖

CSS

我試圖用DOM和CSS概念編寫(xiě)一個(gè)簡(jiǎn)單的待辦事項(xiàng)列表，從一個(gè)向html追加新任務(wù)的函數(shù)開(kāi)始。和工作，但是即使附加的新任務(wù)與模板任務(wù)具有相同的類。他們有一個(gè)不同的細(xì)節(jié)，模板任務(wù)的按鈕之間有空白，我不明白為什么會(huì)發(fā)生這種情況，即使適用于類& quot空白:分隔空間；"只有模板采取這種風(fēng)格。

也許這很容易解決，但我不知道如何解決。

這里是一個(gè)圖像，只有模板有空白

我想知道，如何禁用這種空白，甚至添加到類的所有元素。taskElement。我是一個(gè)合法的乞丐，指望你們這些:D人。(我的英語(yǔ)很差，因?yàn)槲沂前臀魅?。

我把所有用過(guò)的代碼都留在下面。

/* Elements */
const mainContainer = document.getElementById('mainContainer');
const newTaskInput = document.getElementById('newTask');
const addTaskBtn = document.getElementById('addTaskBtn');

/* Functions */
const addNewTask = () => {
  const divTaskElement = document.createElement('div');
  divTaskElement.classList.add('taskElement');

  const divTaskElementName = document.createElement('div');
  divTaskElementName.classList.add('taskElementName')

  const taskName = document.createElement('p');
  taskName.classList.add('taskName');

  const taskElementButtons = document.createElement('div');
  taskElementButtons.classList.add('taskElementButtons');

  const form = document.createElement('form');
  form.classList.add('taskElementForm')

  const buttonDone = document.createElement('button');
  buttonDone.classList.add('doneTask');
  buttonDone.type = 'button'
  buttonDone.innerHTML = '<i class="fa fa-check mark-done" aria-hidden="true"></i>'

  /* const iDone = document.createElement('i');
      iDone.classList.add("fa", "fa-check", "mark-done", 'aria-hidden');
      iDone.ariaHidden = "true" */

  const buttonEdit = document.createElement('button');
  buttonEdit.classList.add('editTask');
  buttonEdit.type = 'button'
  buttonEdit.innerHTML = '<i class="fa fa-pencil mark-edit" aria-hidden="true"></i>'

  /* const iEdit = document.createElement('i');
      iEdit.classList.add("fa", "fa-pencil", "mark-edit", 'aria-hidden');
      iEdit.ariaHidden = "true"; */

  const buttonDelete = document.createElement('button');
  buttonDelete.classList.add('deleteTask');
  buttonDelete.type = 'button';
  buttonDelete.innerHTML = '<i class="fa fa-trash mark-delete" aria-hidden="true"></i>'

  /*const iDelete = document.createElement('i');
  iDelete.classList.add('fa', 'fa-trash', 'mark-delete', 'aria-hidden');
  iDelete.ariaHidden = "true";*/

  taskName.innerText = newTaskInput.value

  divTaskElementName.appendChild(taskName)

  /* buttonDone.appendChild(iDone);
      buttonEdit.appendChild(iEdit);
      buttonDelete.appendChild(iDelete); */

  form.appendChild(buttonDone);
  form.appendChild(buttonEdit);
  form.appendChild(buttonDelete);
  taskElementButtons.appendChild(form)

  divTaskElement.append(divTaskElementName, taskElementButtons)

  mainContainer.appendChild(divTaskElement)

  newTaskInput.value = "";

}

/* Event Listeners */

addTaskBtn.addEventListener('click', (ev) => {
  ev.preventDefault()
  addNewTask();
})

* {
  margin: 0;
  padding: 0;
  color: black;
  font-family: Roboto;
}

body {
  background-image: url("https://img.freepik.com/fotos-gratis/bela-foto-aerea-das-montanhas-de-fronalpstock-na-suica-sob-o-lindo-ceu-rosa-e-azul_181624-9315.jpg?w=740&t=st=1685292487~exp=1685293087~hmac=a3a9c4c05b295ac531b062fdc84cfe06319c97efd666aae1e6951555472f026f");
}

#mainContainer {
  justify-content: center;
  text-align: center;
  width: 48%;
  margin: 13% auto 0 auto;
  background-color: white;
  border: 2px white solid;
  border-radius: 11px;
}

#mainContainerTitle {
  margin-top: 1.4%;
  font-size: 28px;
}

.hr {
  width: 98%;
  margin: 0 auto 0 auto;
}

#newTaskContainer {
  font-size: 20px;
  margin: 2% 0 1% 0;
}

.fa-plus {
  padding: 1px 3px 1px 3.5px;
}

#searchingContainer {
  font-size: 20px;
  margin: 1.6% 1.5% 2% 1%;
  display: flex;
  justify-content: space-between;
}

.fa-delete-left {
  padding: 1px 2.5px 1px 2.5px;
}

#filterContainer {
  display: flex;
}

#filterSelect {
  padding: 1% 1% 1% 0;
  margin-left: 2%;
}

.taskElement {
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: break-spaces;
  margin-top: 1%;
  width: 99%;
}

.taskElementName {
  margin-left: 1%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="style/styles.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet"  integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <link  rel="stylesheet" />
  <script src="scripts/index.js" defer></script>
  <title>To do list</title>
</head>

<body>
  <div id="mainContainer">
    <div id="newTaskContainer">
      <h1 id="mainContainerTitle">To do list</h1>
      <form>
        <label for="newTask">Task:</label>
        <input type="text" id="newTask" />
        <button type="submit" id="addTaskBtn">
                        <i class="fa-sharp fa-light fa-plus"></i>
                    </button>
      </form>
    </div>
    <hr class="hr" />
    <div id="searchingContainer">
      <div id="searchContainer">
        <form>
          <label for="searchInput">Search:</label>
          <input type="text" id="searchInput" />
          <button type="button">
            <i class="fa-solid fa-delete-left"></i>
          </button>
        </form>
      </div>
      <div id="filterContainer">
        <label for="filterSelect" id="filterSelectLabel">Filtrar:</label>
        <select id="filterSelect">
          <option value="all">All</option>
          <option value="pendent">Pendent</option>
          <option value="done">Done</option>
        </select>
      </div>
    </div>
    <hr class="hr" />

    <div class="taskElement">
      <div class="taskElementName">
        <p class="taskName">Template task</p>
      </div>
      <div class="taskElementButtons">
        <form class="taskElementForm">
          <button type="button" class="doneTask">
            <i class="fa fa-check mark-done" aria-hidden="true"></i>
          </button>
<button type="button" class="editTask">
            <i class="fa fa-pencil mark-edit" aria-hidden="true"></i>
          </button>
          <button type="button" class="deleteTask">
            <i class="fa fa-trash mark-delete" aria-hidden="true"></i>
          </button>
        </form>
      </div>
    </div>
  </div>
</body>

</html>

你只需要?jiǎng)h除空白:中斷空間；taskElement CSS類的。

.taskElement {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* white-space: break-spaces; */
    margin-top: 1%;
    width: 99%;
}

問(wèn)題是您的HTML包含空白，因?yàn)槟s進(jìn)了HTML并告訴您的CSS不應(yīng)該忽略空白(默認(rèn)情況下是這樣的)。

如MDN CSS文檔中所述:

分隔空間

其行為與預(yù)包裝的行為相同，除了...

和

預(yù)包裝

保留空白序列。換行符換行，at & ltbr & gt，并根據(jù)需要填充行框。

當(dāng)您生成新任務(wù)時(shí)，這種情況不會(huì)發(fā)生，因?yàn)樗怯赡腏avaScript以編程方式完成的，沒(méi)有任何要解析的空白。

如果我理解您的問(wèn)題，我認(rèn)為解決方案是您需要設(shè)置:

.taskElement {
    justify-content: center;
}