一个 html 行中多个详细信息标签的边框无法响应

Question

我的网站有问题：https://www.ars-neurochirurgica.com/。我有几个手风琴菜单，我用纯 css 制作，没有任何 javascript，一切都很完美，除了一个问题：

当我单击类别以展开标签时，所有其他与位于同一行的详细标签一起折叠的框将从 .div 展开它们的边框。有没有办法在不使用 javascript 的情况下解决这个问题？如果详细信息标签打开，我尝试仅绘制边框，但是我遇到了边框小于 .div 的问题，因为它只会分配给详细信息标签。最好的方法是能够从 details[open] 标记中选择父元素。然而，在做了一些仅用 css3 不可能的研究之后。任何人都知道如何解决这个问题？在移动设备上它工作得非常好，因为只显示一行....

Answer 1

这里有一个快速解决方案，可以解决您描述的边界问题：

1. 从.compactblock 中删除border、padding-left 和padding-right。

2. 添加以下 CSS：

   details {
       padding-left: 10px;
       padding-right: 10px;
   }
   
   details[open] {
       border: 1px solid var(--darkblack);
       height: 100%;
   }
   

基本上，这会强制<details> 元素展开以填充整个高度，使其边框围绕展开后的折叠块的全部内容。它还将填充从<div> 容器移动到<details> 元素本身，以便边框的宽度与摘要区域匹配。

但是，由于这种方法仍然使用grid 布局，因此当您在任何行中展开块时，您会注意到元素仍然“跳跃”到“幻影”块下方。为了解决这个问题，我强烈建议您根据 cmets 中的建议改用 flexbox。