个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-05 03:49:11 28 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/

28 4 0
文章推荐： php - Symfony 5 - 在提交表单之前获取旧的集合数据
文章推荐： postgresql - 在 pg_bouncer 后面使用 pg_dump 后，search_path 似乎被更改，其他客户端受到影响
文章推荐： javascript - Web-Worker 导入的脚本能否依次导入另一个脚本？
文章推荐： google-chrome - 有没有办法调整网络浏览器窗口的大小，使其尺寸为特定的宽度和高度？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com