如何用CSS实现文本与删除按钮间距均等，防止文本挤压按钮右移

嘿，这个问题我之前也碰到过！文本长度不一样导致Delete按钮被挤得忽左忽右，确实挺闹心的。不过用CSS就能轻松解决，给你几个靠谱的方案：

方案一：Flexbox布局（最推荐） #

Flexbox是现代布局的首选，它能让容器内的元素自动分配空间，完美解决文本和按钮间距不一致的问题。

首先给动态创建的<p>元素加一个类名（比如todo-item），然后用CSS设置Flex布局：

.todo-item {
  display: flex;
  align-items: center; /* 让文本和按钮垂直居中对齐 */
  justify-content: space-between; /* 文本靠左，按钮靠右，自动分配中间间距 */
  padding: 8px 12px; /* 给内容加一点内边距，看起来更舒服 */
  margin: 4px 0;
  border: 1px solid #eee; /* 可选，加个边框区分每个待办项 */
}

然后在你的JavaScript代码里，记得给新创建的<p>元素添加这个类：

function todo() {
  var ParentDiv = document.getElementById('mydiv');
  var newPara = document.createElement('p');
  // 给p元素添加类名
  newPara.classList.add('todo-item');
  
  var value = document.getElementById('input-box').value;
  var newText = document.createTextNode(value);
  newPara.appendChild(newText);
  
  // 创建delete按钮
  var deleteBtn = document.createElement('button');
  deleteBtn.textContent = 'delete';
  newPara.appendChild(deleteBtn);
  
  ParentDiv.appendChild(newPara);
}

这样不管文本多长，按钮都会稳稳地待在右侧，和文本的间距始终保持均匀。

方案二：利用margin-left: auto实现按钮右对齐 #

如果不想用Flexbox，这个方法也能达到类似效果。原理是让按钮自动“推”到容器的最右侧：

.todo-item {
  display: block; /* 保持块级元素特性 */
  padding: 8px 12px;
  margin: 4px 0;
  border: 1px solid #eee;
}

.todo-item button {
  margin-left: auto; /* 关键属性，让按钮自动右移 */
  display: inline-block; /* 确保margin属性生效 */
}

同样需要给<p>元素添加todo-item类，JS代码和方案一一样就行。

方案三：绝对定位固定按钮位置（适合特殊场景） #

如果需要按钮固定在容器右侧某个位置，可以用绝对定位，但这种方式灵活性稍差，适合文本长度不会太长的场景：

.todo-item {
  position: relative; /* 父元素设为相对定位 */
  padding: 8px 12px;
  padding-right: 80px; /* 给按钮预留足够空间 */
  margin: 4px 0;
  border: 1px solid #eee;
}

.todo-item button {
  position: absolute; /* 按钮设为绝对定位 */
  right: 12px; /* 距离右侧的距离 */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%); /* 修正垂直居中的偏移 */
  width: 70px; /* 可选，固定按钮宽度 */
}

这个方案里，按钮的位置完全不受文本长度影响，但如果文本太长会溢出容器，所以需要额外处理文本溢出（比如加text-overflow: ellipsis）。

内容的提问来源于stack exchange，提问作者TALHA001