gpt4 book ai didi

html - 强制 显示为 :inline instead of inline-block

转载 作者:行者123 更新时间:2023-12-05 03:49:11 27 4
gpt4 key购买 nike

我想使用 <details>/<summary>纯 CSS 弹出窗口的标签,但是 <summary>表现为内联 block ,我无法将其更改为内联。

有没有办法强制<summary>表现得像 display:inline 而不是 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 &ltdetails&gt / &ltsummary&gt tags for
pure CSS popups,
<details>
<summary>
but &ltsummary&gt behaves as inline-block
</summary>
(I'm fine with &ltdetails&gt)
</details>
and I cannot change it to inline. Is there any way to force &ltsummary&gt
to behave as display:inline instead of inline-block?
<br><br>
I would like to use the &ltdetails&gt / &ltsummary&gt tags for
pure CSS popups,
<span class="mimic">
but &ltsummary&gt behaves as inline-block
</span>
and I cannot change it to inline. Is there any way to force &ltsummary&gt
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 &ltdetails&gt / &ltsummary&gt tags for
pure CSS popups,
<details>
<summary>
but &ltsummary&gt behaves as inline-block
</summary>
(I'm fine with &ltdetails&gt)
</details>
and I cannot change it to inline. Is there any way to force &ltsummary&gt
to behave as display:inline instead of inline-block?
<br><br>
I would like to use the &ltdetails&gt / &ltsummary&gt tags for
pure CSS popups,
<span class="mimic">
but &ltsummary&gt behaves as inline-block
</span> and I cannot change it to inline. Is there any way to force &ltsummary&gt to behave as display:inline instead of inline-block?
<p>
Just start to play with the width of the viewport...
</p>
</span>

关于html - 强制 <summary> 显示为 :inline instead of inline-block,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64069910/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com