CSS 更改为 display: flex 影响类如何应用于按钮答案

【问题标题】：CSS changing to display: flex affects how classes are applied to buttonCSS 更改为 display: flex 影响类如何应用于按钮
【发布时间】：2020-09-20 02:45:21
【问题描述】：

我有一个无序列表，其 li 元素每个都包含一个 button 作为其中的子元素。

在 Javascript 中，当像这样单击 li 元素时，我会切换添加“完成”样式（划掉文本）

function crossOffList(e){
    if (e.target.nodeName === "LI"){
        e.target.classList.toggle("done");
    }
}

以下为li风格：

li {
  margin: 10px 0px;
  **display: flex;**
  justify-content: space-between;
  align-items: center;
  align-self: center;
}

问题是，当我将display: flex; 添加到li 样式时，单击li 项目后，按钮也会被划掉，如下所示：

这就是按钮被创建并添加到li元素的方式

function addDeleteButton(element){
    element.innerHTML += " ";
    var button = document.createElement("button");
    button.appendChild(document.createTextNode("Delete"));
    button.addEventListener("click", function(e) {
        ul.removeChild(element);
    })
    
    //button.classList.add("delete-button");

    element.appendChild(button);
}

// initialise all starting list elements
for (var i of document.getElementsByTagName("li")){
    addDeleteButton(i);
    i.addEventListener("click", crossOffList);
}

如果显示未设置为 flex，则不会发生这种按钮也变成划线的行为。是什么导致了这种行为，有没有办法在点击后按钮不被划掉的情况下使用 flex？

【问题讨论】：

在问题编辑器中单击<> 并添加足够的html 和css 以在页面中演示问题。如果您将删除线添加到父级，它会影响它的子级。如果只想要文本删除线，请使用文本范围和更具体的规则以仅针对范围 .done span{} 例如
尝试了几种方法来否决按钮上的 line-through 似乎在设置 flex 时它坚持选择 LI 元素 done 类 - 以及您添加的任何其他内容，如 text-decoration : 下划线;即使 !important 已设置。到目前为止，我设法解决这个问题的唯一方法是按照@charlietfl 的建议将文本放入 span 元素中。
我在 MDN 文档中发现了这一点'文本装饰画在后代元素上。这意味着不可能在后代上禁用在其祖先之一上指定的文本装饰。 [link]developer.mozilla.org/en-US/docs/Web/CSS/text-decoration 所以现在的问题似乎是相反的：为什么当 flex 不存在时它没有通过按钮？

标签： javascript css flexbox

【解决方案1】：

CSS text-decoration 不会像其他属性一样被继承，它会被传播。它不能通过在子元素中设置另一个值来覆盖（但可以添加）。 Override text-decoration on child element对此有一些讨论但是，MDN 文档指出，当子元素是浮动的或绝对的时，这种传播并不适用。

我无法使用 float 显示任何改进，但如果我们绝对定位按钮时且仅当父 LI 元素具有 display:flex 时，会有一些改进

例如，如果您希望每个 LI 元素弯曲，则在每个 LI 元素上放置 class flex，如果不希望则将其删除，并将 CSS 更改为：

li {
  position: relative;
  margin: 10px 0px;
  justify-content: space-between;
  align-items: center;
  align-self: center;
  background-color:cyan;
}
li.flex {/* add .flex class to each li if you want them flexed*/
  display: flex;
  }
li.done {
  text-decoration: line-through;
}
.flex button {
  position:absolute;
  right:0;
}

需要做一些工作来确保实现所需的布局，但至少这种方法不会在 flex 和 non-flex 情况下删除按钮文本。

【讨论】：