强制< summary>表现为display：inline而不是inline-block [英] Force <summary> to behave as display:inline instead of inline-block
本文介绍了强制< summary>表现为display：inline而不是inline-block的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想将< details> / < summary> 标记用于纯CSS弹出窗口，但是< summary> 的行为与inline-block相同，我无法将其更改为inline。
I would like to use the <details> / <summary> tags for pure CSS popups, but <summary> behaves as inline-block and I cannot change it to inline.
有什么方法可以强制< summary> 表现为display：inline而不是inline-block？
Is there any way to force <summary> to behave as display:inline instead of inline-block?
<!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; 可以做到，但表现却很奇怪：
display: contents; can do it but it will behave strangely:
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>
这篇关于强制< summary>表现为display：inline而不是inline-block的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
