如何将图例放置在带边框的字段集中? [复制]

2024-01-26

根据网络上的几个参考文献,不可能定位图例。所以建议用span包裹起来:

<legend><span>Foo</span></legend>

然后我们可以将跨度定位在字段集中。但是当我想在字段集顶部添加边框时,图例有一个间隙。幸运的是,我发现向图例添加边框也可以修复这个很小的间隙,但这是一个丑陋的解决方案(与 css 的其他所有内容一样)。对于这个问题,您还有更有效的解决方案吗?

注意:在我开始写这个问题之后,我同时找到了解决方案,所以我仍然想问它。


我发现很简单float:left for LEGEND会做这项工作。

代码笔样本:http://codepen.io/vkjgr/pen/oFdBa http://codepen.io/vkjgr/pen/oFdBa

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

如何将图例放置在带边框的字段集中? [复制] 的相关文章

  • 两个 Div 之间的固定宽度间隙

    有谁知道如何修复两个 div 之间的间隙 我有一个主要内容 Div 里面有两个带有图片的 Div 视图的宽度为 768 像素 当我开始拉伸视图时 两张图片开始相互远离 但理想情况下 主要内容 Div 应该在周围有空白的情况下拉伸 并且图片之
  • 通过 JavaScript 检测浏览器换行

    我需要 javascript 来检测每个浏览器包装的文本行并将其包装到 span class line 我读过一些关于测量每个单词的 y 轴的文章 但还没有看到可靠的解决方案 这是我到目前为止所拥有的 看到它Jsfiddle http js
  • 在 IE 8 及以下版本中动态添加 @font-face 规则

    我使用 IE stylesheet addRule 方法添加 font face 规则 但是 符号对于该方法的 选择器 参数来说是不允许的字符 因此我收到 无效参数 错误 s addrule font face font family Fo
  • 将样式添加到 mat-autocomplete 的 mat-option

    我有这个 HTML代码在这里 https stackblitz com edit angular mat autocomplete with selected value vx1uqg file src 2Fapp 2Fautocomple
  • CSS 的波浪形状

    我正在尝试使用 CSS 重新创建此图像 我不需要重复它 这就是我开始的 但它只有一条直线 wave position absolute height 70px width 600px background e0efe3 div div 我认
  • Flexbox 不适用于 iPad 和 Safari [重复]

    这个问题在这里已经有答案了 我在网站上使用 Flexbox 但它在 iPad Air iPad 3 和 Safari PC 上崩溃 设计和代码与此 codepen 类似 http codepen io anon pen xwJzEg htt
  • 禁用引导列上的滚动

    我正在尝试禁用引导列上的滚动 这是我的代码 div class container fluid h 100 div class row h 100 div class col 4 h 100 bg dark fixed div div cl
  • 如何设置菜单按钮和菜单项的样式

    我尝试更改菜单按钮中的样式 我可以更改菜单按钮样式 但不能更改其菜单项 无论我尝试什么 菜单按钮内的菜单项都保持不变 menu button fx background color black menu button label fx ba
  • 避免响应式页面的重复内容

    我目前正在做一个涉及响应式设计的项目 整个布局应该使用HTML和CSS来实现 我知道可以使用 java 脚本将内容从一个列布局移动到另一列布局 而无需复制内容 但是使用 HTML 和 CSS 是否可以实现相同的效果 以下面的例子为例 它会在
  • 指针事件:无,过滤,适用于 ie8 和任何地方,不适用于 ie9

    正如我在这里看到的 https stackoverflow com questions 3680429 click through a div to underlying elements 4839672 4839672 过滤器可用于模拟跨
  • 在剑道组合框中动态添加项目

    如果你们中有人使用过 kendo ui 请告诉我如何在 kendo 组合框中动态添加新项目 我尝试在谷歌和其他地方搜索 我的结论是剑道中没有这样的功能 以供参考 JSBIN http jsbin com ebutaw 2 edit sour
  • 将 2 个 Div 垂直居中另一个 Div

    我有 2 个 div 我想将它们垂直居中在另一个 div 内 目前我有 http jsfiddle net 5vpA3 1 http jsfiddle net 5vpA3 1 现在我明白这里发生了什么 但我希望左侧 div 在该容器内垂直对
  • 输入文本中固定下划线

    我试图修复所有输入文本类型中的下划线 但没有成功 Example My code input width 100 background color fcfcfc border 0 padding 10px div class col lg
  • 背景突出显示代码块中的文本?

    我的目标是能够显示如下内容 我想要背景突出显示已经有的代码块内的一段代码语法高亮 我想在 Github 上托管于 Github Pages 上的 Markdown 文件上执行此操作 可以使用 kramdown markdown html c
  • 如何将div对齐到页面底部,而不是屏幕底部

    我想将 div 与页面底部对齐 而不是与屏幕底部对齐 当我这样做时 contact block position absolute bottom 0 left 0 div 被放置在屏幕的底部区域 当我的页面很长时 我必须向下滚动 并且本应位
  • Firefox:如何测试首选颜色方案?

    在 Firefox 67 中 可以使用媒体查询来检测用户对浅色或深色主题的偏好 https davidwalsh name demo prefers color scheme php 在我的 Firefox 版本 在 Ubuntu 下 中
  • 父>子CSS选择器

    我经常使用这个CSS选择器parent gt child 我的设计在 Mozilla 和 Opera 中看起来不错 但在 IE 中 就很糟糕了 我知道 gt 在 IE 中无法识别 但是 IE 中的替代方案是什么 一种替代方法是使用通用选择器
  • 在 HTML 中移动选取框/下移文本

    我正在尝试向下移动或移动 HTML 中的文本 但我似乎无法将其移动到任何地方 我添加了一个颜色命令来更改文本的颜色 但似乎只是移动了 它一直到顶部
  • CSS:将加载指示器放置在屏幕中央

    如何将加载指示器放置在屏幕中央 目前我正在使用一个小占位符 它似乎工作得很好 但是 当我向下滚动时 加载指示器保持在该预定义位置 我怎样才能让它跟随滚动 使其始终位于顶部 busy position absolute left 50 top
  • Excel 类似 HTML 表格,可在 x 轴(完整表格)和 y 轴(标题固定)上滚动

    我想建立一个具有固定宽度列的表格 在大多数情况下 表数据会水平和垂直溢出 如果列的宽度大于视图宽度 则需要水平滚动条来滚动并查看所有表列 同时滚动标题和数据 如果数据的高度大于可用视图 则会出现垂直滚动框 但在滚动时保持标题固定 以便用户关

随机推荐

  • Visual C++ 程序可以在 Mac OS X 或 Linux 上编译和运行吗?

    如果是这样 怎么办 具体来说 我想编译并运行wavdiff http code google com p ac3filter source browse wavdiff cpp repo tools 在 Mac OS X Snow Leop
  • 为什么派生类中的虚拟析构函数为空?

    我有一个问题 我看到在某些代码中 派生类中的虚拟析构函数是空的 那么为什么我们需要它 因为它什么也不做 它是否用于调用基类中的析构函数 如果没有它 则无法调用析构函数 或者它只是一个符号来告诉代码阅读器这个析构函数是虚拟的 这使得代码更容易
  • C# TagLib 设置 Mp3 专辑封面

    我有一个 mp3 文件 我想向其中添加专辑封面 艺术作品已保存到临时文件夹中 我已检查过它 它就在那里并且是 jpeg 这是我给出的代码 public void AddMp3Tags TagLib File file TagLib File
  • JavaScript;如何设置三位数字后的点?

    我有以下 JavaScript 代码 var calculation select name somevalue1 option selected data calc select name somevalue1 option select
  • 在 EF Core 中设置默认日期时间值

    所以问题是我无法设置模型以便迁移显示DateTimeKind Utc代替DateTimeKind Unspecified我正在这样做 contactsConfiguration Property c gt c DateAdded Value
  • 在C++中连接两个大文件

    我有两个 std ofstream 文本文件 每个文件有一百多兆 我想将它们连接起来 使用 fstream 存储数据来创建单个文件通常会因大小太大而导致内存不足错误 有没有比 O n 更快的方法来合并它们 文件 1 160MB 0 1 3
  • GraphQL - 将枚举值作为参数直接传递给突变?

    给出以下 GraphQL 类型定义 const typeDefs enum Action update delete type Mutation doSomething action Action 此查询有效 const query mut
  • C 中的异常处理 - setjmp() 返回 0 有什么用?

    我有一些有关 setjmp longjmp 使用的问题 setjmp jmp buf stackVariables 返回 0 有什么用 它是默认值 我们无法影响 setjmp stackVariables 的唯一意义就是将 stackVar
  • 如何从 Java 调用具体的 Scala 特征方法?

    我有一个 Java Scala 混合 Maven 项目 我需要重用 Saddle 方法make具体定义为称为特征的一部分Index 方法已定义here https github com saddle saddle blob master s
  • 在多屏幕环境中最大化窗口而不隐藏/阻止任务栏

    这是一篇写给所有曾经问过自己 如何在多屏幕设置中最大化窗口而不阻塞任务栏 的人的文章 问题似乎是一个窗口最大化框 and 最小化框设置为 false 并且在多屏幕环境中以编程方式最大化涵盖entire屏幕 不仅是屏幕 工作区 为了仅最大化工
  • 行为和事件触发器有什么区别?

    在 Xamarin Forms 中你有行为 https developer xamarin com guides cross platform xamarin forms working with behaviors 对某些事件执行某些操作
  • 使用 try-with-resources 语句声明 Stream 与不使用 try-with-resources 语句有什么区别?

    在Java 8中 Stream 即AutoCloseable 不能被重用 一旦被消耗或使用 流将被关闭 那么用 try with resources 语句声明的实用程序是什么 try with resources 语句的示例 public
  • 选择量角器中的第一个可见元素

    我正在编写量角器测试并且喜欢它 尽管有时似乎会陷入一些看起来应该很简单的事情 例如 我想循环浏览其中一个页面上包含 提名 文本的所有按钮 页面上有几十个 但只有 1 或 2 个可见 所以我想点击第一个 这是我当前使用的代码 var nomi
  • 在 Rails 模型中动态生成范围

    我想动态生成范围 假设我有以下模型 class Product lt ActiveRecord Base POSSIBLE SIZES small medium large scope small where size small scop
  • 通过 https 运行 Angular Cli Ng Serve 2018

    有没有办法可以通过 https 运行我的 Angular localhost 我尝试了一些不同的教程 但没有任何效果我尝试过 通过 https 为您的 Angular cli 应用程序提供服务 https freerangeeggs net
  • NodeJS Mongo - Mongoose - 动态集合名称

    所以 我想创建一个基于客户端的分区模式 其中我将集合名称设置为 function 我的伪代码是这样的 var mongoose require mongoose Schema mongoose Schema var ConvForUserS
  • 刷新令牌的正确方法

    有一个功能getUser in RequestManager class那叫我的VC func getUser onCompletion escaping result User error String gt Void Alamofire
  • Elmah.MVC 在生产环境中不记录错误

    我使用以下命令将 Elmah MVC 安装到我的 MVC 项目中Elmah MVC Nuget 包 http nuget org packages Elmah MVC 它在开发环境中工作正常 但是当我将网站上传到托管服务器 IIS7 时 它
  • 如何旋转仪表图表中的刻度盘?情节地使用Python

    我最近开始使用plotlypython 中的仪表图包 完成教程和模板后here https plot ly python gauge charts 我想知道是否有办法在给定角度值的情况下旋转 表盘 或 针 有人建议我使用 css 转换做到这
  • 如何将图例放置在带边框的字段集中? [复制]

    这个问题在这里已经有答案了 根据网络上的几个参考文献 不可能定位图例 所以建议用span包裹起来 legend span Foo span legend 然后我们可以将跨度定位在字段集中 但是当我想在字段集顶部添加边框时 图例有一个间隙 幸