我想使用<details> / <summary>纯 CSS 弹出窗口的标签，但是<summary>表现为内联块，我无法将其更改为内联。
有什么办法可以强制<summary>表现为显示：内联而不是内联块？
<!DOCTYPE html>
<html>
<head>
<style>
summary {
color: red;
}
summary::-webkit-details-marker {
display: none;
}
details, summary {
display: inline;
/* hyphens: manual;/ */
/* word-break: break-all; */
/* overflow-wrap: anywhere; */
/* white-space: unset; */
}
.mimic {
color: darkseagreen;
display: inline-block;
}
</style>
</head>
<body>
<span>
I would like to use the <details> / <summary> tags for
pure CSS popups,
<details>
<summary>
but <summary> behaves as inline-block
</summary>
(I'm fine with <details>)
</details>
and I cannot change it to inline. Is there any way to force <summary>
to behave as display:inline instead of inline-block?
<br><br>
I would like to use the <details> / <summary> tags for
pure CSS popups,
<span class="mimic">
but <summary> behaves as inline-block
</span>
and I cannot change it to inline. Is there any way to force <summary>
to behave as display:inline instead of inline-block?
<p>
Just start to play with the width of the viewport...
</p>
</span>
</body>
</html>
display: contents;可以做到，但它会表现得很奇怪：
summary {
color: red;
}
summary::-webkit-details-marker {
display: none;
}
details,
summary {
display: contents;
/* hyphens: manual;/ */
/* word-break: break-all; */
/* overflow-wrap: anywhere; */
/* white-space: unset; */
}
.mimic {
color: darkseagreen;
display: inline-block;
}
<span>
I would like to use the <details> / <summary> tags for
pure CSS popups,
<details>
<summary>
but <summary> behaves as inline-block
</summary>
(I'm fine with <details>)
</details>
and I cannot change it to inline. Is there any way to force <summary>
to behave as display:inline instead of inline-block?
<br><br>
I would like to use the <details> / <summary> tags for
pure CSS popups,
<span class="mimic">
but <summary> behaves as inline-block
</span> and I cannot change it to inline. Is there any way to force <summary> to behave as display:inline instead of inline-block?
<p>
Just start to play with the width of the viewport...
</p>
</span>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
