如何在css/html/js中排列半圆的元素

2023-12-30

我似乎迷失了如何以半圆形式标记短语列表(在附图中命名为 title1、title2、title3 等)。 也许有简单的CSS跨浏览器解决方案(不,不,没有IE6,哈哈),或者我需要使用javascript?我无法将其作为图像插入,因为我要求页面上的所有文本都应该是真实文本。

或者也许有一些 Jquery 插件可以解决这个问题..

提前致谢!


我会使用 JavaScript 和一些简单的数学来计算每个标题的位置。圆上 x 和 y 位置的公式如下:

x = radius * cos( angle )
y = radius * sin( angle )

因此,使用它,您可以计算每个标题的位置:

elem.style.left = radius * Math.cos( angle ) + "px"; // angle in radians
elem.style.top = radius * Math.sin( angle ) + "px";

我制作了一个演示小提琴来展示这一点:http://jsfiddle.net/eGhPg/ http://jsfiddle.net/eGhPg/

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

如何在css/html/js中排列半圆的元素 的相关文章

  • 如何使用 Spring Boot 传输音频

    我想让用户能够播放声音 我的实现在 Firefox 上运行良好 在 Safari 上 不播放声音 我验证了音频控制可以在 Safari 中与其他网站一起使用 所以 我认为我必须更改控制器中的某些内容 控制器 RequestMapping v
  • 如何在单击按钮时清除反应挂钩中的间隔

    我正在用反应钩子构建一个简单的计时器 我有两个按钮启动和重置 当我单击开始按钮时 handleStart 函数工作正常 计时器启动 但我不知道如何在单击重置按钮时重置计时器 这是我的代码 const App gt const timer s
  • 在已标记的输入元素上使用“aria-labelledby”的目的是什么?

    许多 ARIA 演示网站使用以下代码
  • 公开闭包内的方法

    当我们在闭包内创建一个方法时 该方法将成为该闭包的私有方法 并且在我们以某种方式公开它之前无法访问它 怎么可能暴露呢 您可以返回对它的引用 var a function var b function I m private alert go
  • @fontface - 禅宗购物车中的 403 禁止错误

    我不确定这是否是发布此内容的正确位置 因为我不知道问题出在哪里 基本上 字体现在对我来说真的很痛苦 而且没有任何效果 我尝试从 google fonts 加载字体 但遇到了 IE 问题 所以我决定下载它们并自己提供服务 但现在它无法在任何浏
  • NodeJS - 将相对路径转换为绝对路径

    In my 文件系统我的工作目录在这里 C temp a b c d 在 b bb 下有文件 tmp txt C temp a b bb tmp txt 如果我想从工作目录转到该文件 我将使用以下路径 bb tmp txt 如果该文件不存在
  • 如何将React JS状态保存到本地存储中

    我不知道如何将 React js 状态存储到本地存储中 import React Component from react import App css import auth createUserProfileDocument from
  • 等待异步 grunt 任务完成

    我收到了 grunt 设置 其中一个新任务应该执行 grunt task run 已经存在的任务 要执行的任务是异步的 新任务应该等待异步任务完成 执行此操作的首选方法是什么 grunt 已经涵盖了这一点 你应该将你的任务声明为异步任务 并
  • 使用 eval 时不会受到 XSS 威胁

    我正在制作 不是现在 但我仍然对这个感到好奇 一款使用 HTML5 和 JS 的游戏 我想要的是人们可以插入自定义脚本 但要安全 function executeCustomJS code eval code bad 当然这段代码非常糟糕
  • 文件缓存:查询字符串与上次修改时间?

    我正在研究缓存网站资源的方法 并注意到大多数与我类似的网站都使用查询字符串来覆盖缓存 例如 css style css v 124942823 后来 我注意到每当我保存 style css 文件时 最后修改的标头都会 更新 使得查询字符串变
  • 如何在数据表角度中基于 JSON 动态填充表值?

    我在用着Angular 数据表 https l lin github io angular datatables 我需要能够根据返回的数据动态创建表 换句话说 我不想指定列标题 Example json数据 id 2 city Baltim
  • 仅使用 HTML 和 CSS 制作弧形帆形状?

    是否可以仅使用 HTML 和 CSS 创建下面的弧形帆形状 我可以看到从这个答案 https stackoverflow com questions 7073484 how does this css triangle shape work
  • 为什么我无法对自定义属性(又名 CSS 变量)进行动画处理?

    看这个动画 金色 div 有一个自定义属性动画的动画 keyframes roll o 1动画 o 这是分步动画的 银色 div 有一个动画 其中normal属性是动画的 keyframes roll o 2动画left 这会持续动画 为什
  • 当rest api应用程序服务器(express)和Angulars js应用程序在不同端口上运行时出现Cors问题

    我有用node js编写的rest api应用程序 express在端口3000上运行 而angularjs应用程序在同一服务器上的端口9001上运行 从 angularjs 应用程序调用 rst api 时 出现了 cors 问题 在re
  • 如何在 CSS 中将容器内的多个 div 居中

    我正在测试像 Windows Metro 风格的中心分隔线 container height 300px width 70 background EEE margin 10px auto position relative block ba
  • 如何禁用网页中的萤火虫?

    如何使用 Javascript 禁用 firebug 我想这样做是为了向访问者隐藏我的网页的运作方式 有什么选择可以做到这一点吗 你不能 你能做的最好的事情就是混淆你的 JavaScript 实际上刮掉了 您能做的最好的事情就是将所有安全关
  • D3 强制布局,较大的节点聚集在中心

    我一直在修改将用于标签云的强制布局 每个标签都由一个
  • Radiobutton-带有纯 html/css 的按钮

    是否可以创建像这样的单选按钮JQuery http jqueryui com demos button radio那些 用纯html css thanks 试试这个小提琴 http jsfiddle net mcXm7 1 http jsf
  • 如何强制下载图片?

    我的页面上有一个动态生成的图像 如下所示 img src 我不想告诉我的用户右键单击图像并点击保存 而是想公开一个下载链接 单击该链接将提示下载图像 如何实现这一目标 最初我在 js 中尝试这样做 var path my image att
  • 突出显示单词并提取其附近文本的函数

    我有一个文本例如 Etiam porta semmalesuada magna mollis euismod 整数取数 ante venenatis dapibus posuere velit aliquet 埃蒂亚姆 门塔 塞姆 male

随机推荐

  • 如何在按确定后停止显示 javascript 警报

    我想在 Facebook 收件箱中有内容时显示提醒 我认为使用用户脚本可以轻松完成 这就是我到目前为止所拥有的 感谢用户脚本 http userscripts org forums论坛 document addEventListener D
  • 在 VB.net 中获取 shell 命令的输出

    我有一个 VB net 程序 在其中调用 Shell 函数 我想在文件中获取从此代码生成的文本输出 但是 这不是执行代码的返回值 所以我真的不知道该怎么做 该程序是一项服务 但可以毫无问题地访问磁盘 因为我已经记录了其他信息 整个服务有多个
  • 如何在 Xcode 9 Playground 中使用 Swift 包管理器 [重复]

    这个问题在这里已经有答案了 是否可以在 Xcode 9 Playground 中使用 Swift Package Manager 目前无法在 Playground 中使用 Swift Package Manager 原因是 Swift 包管
  • Windows 窗体保存到 XML

    我有一个表单 其中包含用户输入的信息 我想将其保存为 XML 我对编程相当陌生 但已经阅读过 XML 是最好的使用方法 我该怎么办呢 如果有帮助的话我可以使用 Sharp Develop 作为 IDE 目前它有 10 个文本框和 10 个日
  • 向函数传递超过 255 个参数

    我只是简单地传递我的论点def声明给def陈述 我不知道您可以通过的参数数量有限制 我假设参数是变量 我需要能够通过超过 255 个参数 有人可以用外行术语帮助我如何解决 超过 255 个参数 谢谢 Code def a Things ha
  • 命名 ant 目标的最佳实践是什么?

    命名 ant 目标的最佳实践是什么 例如 您希望目标 测试 运行什么 所有单元测试 所有功能测试 两个都 用于运行不同类型测试 单元 功能 全部 的标准名称是什么 在 J2SE 中部署软件的目标名称是否有标准 在J2EE 中 我的项目将 a
  • 如何使 tkinter 文本小部件不可选择?

    我想做我的 tkinterText仅作为输出而不是输入 通过一些研究我发现text config state disabled 禁用用户输入 但它仍然允许选择我不想要的文本 我怎样才能得到我的Text小部件不可选择且不可写 最简单的方法是替
  • Android ArrayAdapter 过滤问题

    因为我想使用自定义列表适配器 以便我可以设置列表样式 但过滤器功能不起作用 我可以进行基本过滤 但是一旦过滤结果列表少于我开始过滤时显示的 listItems 数量 应用程序就会崩溃 这段代码中还有第二个问题 我不确定它是否相关 但是当cl
  • 如何在依赖于视图模型的可组合函数中进行预览?

    问题描述 我想要预览我的HomeScreen我的可组合函数HomeScreenPrevieiw预览功能 但是这是不可能的 因为我收到以下错误 java lang IllegalStateException ViewModels creati
  • Interface Builder XIB 编译器错误

    当我将两个 UISwipeGestureRecognizer 连接到 XIB 文件内项目中的单个视图时 奇怪的是 不是在新项目中 我收到此错误消息 有人知道这个错误是什么意思吗 这是编译错误 而不是运行时错误 我使用的是 Xcode 4 4
  • 是否有实现 http 状态代码 418 的语言/软件? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我知道状态代码 418 被定义为愚人节玩笑 并且 预计不会由实际的 HTTP 服务器实现 如上所述维基
  • Pear Mail,如何以UTF-8发送纯文本/文本+文本/html

    我正在尝试以文本和 HTML 格式发送电子邮件 但无法正确发送正确的标头 特别是 我想设置 Content Type 标头 但我找不到如何为 html 和文本部分单独设置它 这是我的代码 headers array From gt emai
  • 如何防止 PostgreSQL JSON/JSONB 字段中的 SQL 注入?

    在使用 database sql 时如何防止 Go 中的 SQL 注入攻击 https stackoverflow com questions 26345318 how can i prevent sql injection attacks
  • 如何使用 sails.js 访问外部 api?

    我正在尝试使用 sails js 在控制器内访问 facebook 的信息 这是我的代码 module exports commonLikes function req res var other uid req param uid var
  • 如何防止 HttpWebRequest 的数据包碎片

    我在针对嵌入式设备上的 HTTP 守护程序使用 HttpWebRequest 时遇到问题 问题似乎是在写入套接字流的 http 标头和 http 负载 POST 之间存在足够的延迟 套接字将套接字缓冲区中的内容释放到服务器 这会导致 HTT
  • 如何使用 Ant 更改文件中的属性值?

    输入示例 SERVER NAME server1 PROFILE NAME profile1 输出示例 SERVER NAME server3 PROFILE NAME profile3 该文件将用于applicationContext x
  • 如何将 Unix 时间戳转换为 Swift NSDate 对象? [关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 我得到的日期为Unix 时间戳 https en wikipedia org wiki Unix time通过我的 AP
  • if constexpr - 为什么丢弃的语句被完全检查?

    我在 GCC 10 中搞乱了 c 20 consteval 并编写了这段代码 include
  • 如何滚动堆栈面板中的数据网格?

    我想滚动datagrid当它的长度超过stackpanel 所以我尝试了这个
  • 如何在css/html/js中排列半圆的元素

    我似乎迷失了如何以半圆形式标记短语列表 在附图中命名为 title1 title2 title3 等 也许有简单的CSS跨浏览器解决方案 不 不 没有IE6 哈哈 或者我需要使用javascript 我无法将其作为图像插入 因为我要求页面上