0

我正在尝试使用 CSS 向故事框添加 10px 填充，而不向网站代码添加任何新的额外 HTML 元素。

有没有办法在不添加新的额外 HTML 元素的情况下将填充添加到故事框？

换句话说：如何仅使用 CSS 选择仅故事框，而不选择<summary>带有它的部分？<summary>（我喜欢我不想在那里改变任何东西的当前布局。）

谢谢你！

details {
  overflow: hidden;
  padding: 0px;
  outline: 1px solid black
}

summary {
  cursor: pointer;
  display: block;
  padding: 10px;
  user-select: none
}
<details>
  <summary>Our Next Holiday Options</summary>


  Story Story Story Story Story Story Story Story Story tory Story Story Story Story Story Story Story Story ory Story Story Story Story Story Story Story Story ry Story Story Story Story Story Story Story Story y Story Story Story Story Story Story Story
  Story Story Story Story Story Story Story Story Story


</details>

4

2 回答 2

1

您可以将填充应用于整个元素，并考虑在摘要上使用负边距以禁用它。

以 20px 为例，我们可以更好地看到：

details {
  overflow: hidden;
  padding: 20px; /* the padding here */
  outline: 1px solid black
}

summary {
  cursor: pointer;
  display: block;
  padding: 10px;
  margin:-20px; /* negative margin here */
  user-select: none
}
details[open] summary {
  margin-bottom:20px; /* the bottom the same as padding*/
}
<details>
  <summary>Our Next Holiday Options</summary>


  Story Story Story Story Story Story Story Story Story tory Story Story Story Story Story Story Story Story ory Story Story Story Story Story Story Story Story ry Story Story Story Story Story Story Story Story y Story Story Story Story Story Story Story
  Story Story Story Story Story Story Story Story Story


</details>

于 2020-04-28T11:01:30.613 回答
1

当您单击摘要元素时，详细信息元素添加了一个属性 - “打开”。您可以使用 css 使用方括号 - 来定位属性[open]。我添加了 css 以向 details 元素添加填充，同时在属性存在时将其从摘要中删除。

details {
  overflow: hidden;
  padding: 0px;
  outline: 1px solid black
}

summary {
  cursor: pointer;
  display: block;
  padding: 10px;
  user-select: none
}

details[open] {
  padding: 10px;
}

details[open] summary {
  padding: 0 0 10px;
}
<details>
  <summary>Our Next Holiday Options</summary>


  Story Story Story Story Story Story Story Story Story tory Story Story Story Story Story Story Story Story ory Story Story Story Story Story Story Story Story ry Story Story Story Story Story Story Story Story y Story Story Story Story Story Story Story
  Story Story Story Story Story Story Story Story Story


</details>

于 2020-04-28T11:01:57.313 回答