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

我想使用 <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/

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

上一篇：javascript - Web-Worker 导入的脚本能否依次导入另一个脚本？

下一篇：postgresql - 在 pg_bouncer 后面使用 pg_dump 后，search_path 似乎被更改，其他客户端受到影响