程序员经验分享-hwhale

强制 表现为 display:inline 而不是 inline-block

2023-12-08

我想使用<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 &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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

popup

inline

display

强制 表现为 display:inline 而不是 inline-block 的相关文章

  • Javascript 播放声音性能重吗？

    我正在用 Javascript 制作一个简单的游戏 当一个物体与墙壁碰撞时 它会发出 砰 的声音 声音的响度取决于物体的速度 速度越高 gt 声音越大 播放功能 playSound function id vol ID of the sou

  • 输入类型=图像 - onclick()，将触发其事件，但在 jquery 中的函数上表现不佳

    我认为这可能是两篇文章 2个问题 所以如果你对此发表评论 我会将它们分开 主要问题实际上是 我怎样才能为按钮设置图像背景 简单且正确 我想现在我可以确定这些事实了 因为我在将图像设置为按钮背景时遇到了 小 问题 我想 好吧 如果很难设置的话

  • 如何在文本区域中使用除“文本插入符号”之外的透明字体？

    我有一个简单的文本区域 我需要制作透明字母 同时允许文本插入符可见 当我应用以下规则时 我会得到隐形插入符 textarea background transparent opacity 0 当我键入不可见文本时 我需要看到文本插入符移动

  • php中的条件格式化html表与时间戳比较

    echo table style width 100 tr echo td Order td echo td Destination td echo td Location td echo td Status td echo td Time

  • 对一组复选框使用 HTML5“必需”属性？

    使用支持 HTML5 的较新浏览器 例如 FireFox 4 时 并且表单字段具有属性required required 并且表单字段为空 空白 然后点击提交按钮 浏览器检测到 必填 字段为空 并且不提交表单 相反 浏览器会显示一条提示 要

  • 如何隐藏 URL 中的锚标记

    如何隐藏地址栏中以下链接 href 的哈希值 a href index php dev name 所以它会将我重定向到index php dev name 但我希望地址栏只显示index php 您可以使用 Javascript oncli

  • 使用 CSS 自定义字体？

    我见过一些在其网站上使用自定义字体的新网站 除了常规的 Arial Tahoma 等 他们支持大量的浏览器 如何做到这一点 同时 如果可能的话 还会阻止人们免费下载该字体 一般来说 您可以使用自定义字体 font face在你的 CSS 中

  • CSS设置默认滚动位置

    有没有办法将滚动位置设置为默认值 我知道如何在 javascript 中做到这一点 例如使用 jquery div divWithScroll attr scrollTop 200 但我只想用CSS来做 我不知道是否可行 不 CSS 中没有

  • div 边框上的内边距

    我想在 css 边框上添加填充 将其拉入 div 内 远离边缘 使用 css 可以吗 css3 很好 webkit 这是设计 我通过将一个 div 放在一个 div 中 然后给内部 div 一个边框来做到这一点 我想让标记尽可能精简 所以如

  • 如何通过单击图像预览上的“x”从文件输入中删除图像？

    我目前有一个文件输入 一旦用户上传图像 就会显示图像预览 在图像预览上 有一个 x 可以从列表中删除图像预览 单击此 x 后 有什么方法可以从输入中的文件集中删除图像吗

  • 如何将udp发送到udp node.js服务器？

    我对此很陌生 所以我真的不知道我在做什么 但我已经设置了一个 node js udp 服务器 我想从客户端 来自网站 向它发送一个数据包 但我不知道如何在 javascript 中做到这一点 或者是否可能 我不是在研究如何从 Node js

  • 如何在HTML中的PHP中注释掉HTML和PHP？

    这是我想注释掉的一行代码 h1 class post title a href title a h1 一种流行的注释方法是分别注释 html 和 php 有一个更好的方法吗

  • Textmate“注释”命令对于 css 代码无法正常工作

    当我在 TextMate 中切换 CSS 源代码的注释时遇到一些问题 Using the shortcut CMD I activate the Comment Line Selection command from the source

  • VBA / HTML / jQuery 选择自动完成 - 在列表中选择

    我正在尝试使用 Excel 中的 VBA 在网站的列表中选择一个值 这不是一个 正常列表 该网站使用 jQuery 选择自动完成 如下所示 example http davidwalsh name demo jquery chosen ph

  • 防止浮动换行，直到元素达到最小宽度

    我有可变宽度的 HTML 布局 内容左侧有一个固定宽度的菜单 div 可变宽度 由 css max width 和 min width 设置 对于非常窄的浏览器窗口 我希望内容包裹在菜单下方 我目前通过设置来实现这一点float left在

  • 如何为背景图像添加边距？

    我想向背景图像添加边距 以便将其与屏幕中间保持距离 但将其添加到该类中会为整个主体添加边距 body poppage background url Imagenes tip3 png 50 200px no repeat E2E4E9 我怎

  • HTML2canvas 和 Canvas2image，下载的屏幕截图不显示我的 HTML 图像

    我一直在开发一个 HTML 页面 我想将其转换为图像 我一直在使用 html2canvas 和 canvas2image 脚本并采用此代码http jsfiddle net 8ypxW 3 http jsfiddle net 8ypxW 3

  • 在d3.js中将2D形状转换为3D，并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程

  • 如何在背景剪辑中包含文本装饰：文本；影响？

    我在用 webkit background clip text border and color transparent在锚标记上 下划线似乎永远不可见 我想要的是将文本装饰包含在背景剪辑中 这是我的CSS background clip

  • 为什么“tbody”不设置表格的背景颜色？

    我在用 tbody 作为 CSS 选择器来设置background color在一个表中 我这样做是因为我有多个 tbody 表内的部分 它们具有不同的背景颜色 我的问题是 当使用border radius在细胞上 细胞不尊重backgro

随机推荐

热门标签