如何均匀地获得任意数量的空间链接?

2024-05-07

好吧,情况是这样的……

假设我有一个网站的导航栏,并且我允许用户更改他们想要在此导航栏上的链接数量。这意味着他们可以有 3、5、10 等。

我想要做的是,如果有一个链接打开,它只占用导航栏上 1/5 的空间。如果我不使用边框,我可能会这样做:

宽度:18%; 填充:0 1%;

但是,我对此有两个问题:

1) 对于 4 个按钮,只要不填满整行就可以了。如果链接太宽,看起来会很丑……但是当我有 6 或 7 个按钮时,就会出现巨大的溢出! 2)由于我有边框,因此我无法对边框或宽度使用百分比值,因为我无法正确估计它的百分比是多少。

现在,我知道我不必使用百分比值,但我理想情况下更喜欢的是第一个按钮是所有其他按钮正确安装所需的最小尺寸,这意味着如果我有 950px 和 6 个链接,第一个链接大约为 150 像素,而其他链接为 160 像素...这很好。我希望导航栏上的所有其他按钮大小相同,无论有多少链接。

我还需要它接受边框...我认为执行此操作的方法是在嵌套 div 中放置边框,这样就不会影响按钮的整体宽度?这一切都很好,但我仍然受到以下问题的困扰:如果我无法让所有导航按钮正确适应宽度,则无法使用我想要的样式设计动态网站。

我可以使用一些 js 技巧吗?我什至不知道...

Thanks

Edit:这是我的演示小提琴 http://jsfiddle.net/vUng3/3/


一个纯 CSS 解决方案,基于链接的合理性,尽管仍然是语义列表项:

See 演示小提琴 http://jsfiddle.net/NGLN/MppZN/2/.

在 IE7、IE8、IE9、Chrome 12、SafariWin 5、Opera 11、FF 4 中的 W7 上进行了测试。

Update:

关于宽度:由于您将导航链接动态注入到 HTML 页面中,因此也可以对导航栏样式进行分类。

See 更新了小提琴 http://jsfiddle.net/NGLN/MppZN/4/.

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

如何均匀地获得任意数量的空间链接? 的相关文章

  • SVG 内部跨度与文本不在同一行

    我在一个跨度内有一个 SVG 文件 同时包含文本 文本和 SVG 的高度相同 但是 SVG 与文本不在同一行 相关jsfiddle https jsfiddle net tcrnjd53 https jsfiddle net tcrnjd5
  • Cocoa webview UserAgent“webkit-legacy”问题

    我解决了这个问题 请看下面所选的答案 我一直在努力寻找导致 OSX Cocoa 应用程序的 WebView 与 Safari 表现不同的原因 事实证明 用户代理是不同的 有点明显 并且我正在访问的网站不知道如何处理它 令人惊讶的是 它是ht
  • 您可以使用 CSS 或 JavaScript 创建渐变为不透明的渐变吗?

    WebKit 引入了创建 CSS 渐变的功能 例如 使用以下代码 webkit gradient linear left top left bottom from fff to 000 但是 是否可以使用 CSS 实现不透明度渐变 我希望渐
  • 如何使用 CSS 使表格中的分隔线/边框消失?

    我有一个简单的 HTML 表格 我希望分隔线 边框 消失 所需的最终结果是一个除了实际文本之外不可见的表格 我尝试将 border 属性设置为 0 但没有帮助 我应该使用什么正确的 CSS 属性 table tr td th border
  • Django base.html扩展为homepage.html,出现静态图像,但home.css不起作用

    Problem 正如标题所示 我正在构建一个 django 项目 base html 扩展为 homepage html 并且工作正常 出现静态图像 但 home css 在任何地方都不起作用 Update 我已经切换了base html
  • Bootstrap 使用 SASS 和 fontawesome 图标分隔符修改面包屑

    所以我正在尝试更改默认值breadcrumb与 SASS 的风格 我已经按照官方 Bootstrap 4 beta 3 文档中提到的方式设置了所有内容 我更改了以下内容custom scss breadcrumb divider f105
  • 与 font-weight:bold 和 与 font-style:italic

    使用之间有什么真正的区别吗 strong and em 而不是 CSS 属性 font weight bold font style italic 另外 这两种选择都存在的真正原因是什么 我可能是错的 但我没有 strong and em
  • 具有列顺序的响应式多列列表

    我正在尝试创建一个有序的多列列表 但正在努力解决 CSS 网格布局规则 期望的结果应该是响应式的 在小屏幕上有 2 个网格列 在较大的屏幕上最多有 4 个网格列 同时保持列顺序 而不是像这样排序 1 2 3 4 5 6 7 8 9 10 1
  • jquery菜单栏浮动顶部

    我试图使菜单栏不断浮动在浏览器的顶部 因此当他们向下滚动页面时 菜单栏仍位于顶部 我该怎么做呢 Regards CSS 标签position fixed 即使滚动 也会使其保持在屏幕上的同一位置 使用它 然后将其定位为top right b
  • 有没有带有保存和语法突出显示功能的 HTML、CSS 在线文本编辑器?

    我想让 css 文件可以从任何地方 家庭 办公室等 访问并准备好编辑 并保存 我将进行手工编码 只想语法突出显示并保存在网络设施上 我尝试了谷歌文档 这很好 因为我可以在线保存 而且它也有修订历史记录功能 这很有用 但它没有语法突出显示 也
  • 文本溢出上的点样式:省略号

    是否可以对点进行样式设置text overflow ellipsis 一个例子是将省略号加粗 如 Lorem Ips 灵感来自这个答案 https stackoverflow com a 21861334 3244925 这是一种设置省略号
  • CSS 3 nth 类型仅限于类 [重复]

    这个问题在这里已经有答案了 有没有办法限制 CSS 3nth of type去上课 我有一个动态数量section具有不同类别的元素指定其布局需求 我想抓住三分之一 module 但似乎nth of type查找类元素类型 然后计算类型 相
  • CSS:结合纹理和颜色

    有人如何将用作背景图像的纹理和该纹理上方的背景颜色结合起来 这是纹理 我希望我的正文背景页面是这样的 我正在努力处理背景图像和背景颜色 http jsfiddle net 87K72 http jsfiddle net 87K72 body
  • 如何使用 Angular 创建 n 个可打印页面?

    嗯 我搜索了一下 没有找到类似的东西 我想知道如何使用 Angular 创建可打印内容 跳转到页面末尾并打印更多内容 如何强制内容始终适合特定尺寸 例如 PDF 我需要 Angular 来执行此操作吗 如果不是 HTML 我可以迭代 PDF
  • Bootstrap 按钮的检查状态

    我想在 Bootstrap 3 0 2 中设置组复选框的选中状态 docs http getbootstrap com javascript buttons html div class btn group div
  • 如何在 CSS 中选择纯 HTML 文本?

    你们有人知道如何在 CSS 中选择纯 HTML 文本吗 我有以下结构 div p class caption caption1 p div class tabs div class moving bg div p class text ta
  • 移动设备上的剩余悬停效果

    我一整天都在努力做这个JSFiddle http jsfiddle net gsamaras q2w4jjyt 4 也适用于手机 但我所有的尝试都没有效果 在桌面上 当用户将鼠标悬停在箭头上时 它会变成红色 在移动设备上 当用户触摸 为了单
  • Ace Editor 自动完成和多种语言

    如何为 Ace 编辑器创建自动完成功能以及如何突出显示 php 中的 html javascript 和 csshttp ace ajax org http ace ajax org
  • 设置引导工具提示上的箭头样式[重复]

    这个问题在这里已经有答案了 我正在尝试使用以下方式设置工具提示样式 tooltip inner 但我遇到了麻烦 因为我找不到如何设置工具提示小箭头的样式 如屏幕截图所示 工具提示的箭头是黑色的 我想在其上添加新颜色 any suggesti
  • JQuery 设置动态最大宽度

    我不太擅长 jQuery 因此完整的代码解决方案将是理想的选择 该函数将 获取浏览器屏幕的 70 宽度 将该宽度转换为其相应的 px 值 设置最大宽度 mainContainer使用从转换 计算中获得的值 这是我要设置的容器的 CSS 样式

随机推荐

  • 在单独的线程上显示 WPF-“NotifyIcon”

    我目前正在开发一个 Office 加载项 我需要显示一个显示进度的通知对话框 我正在使用Philipp Sumi 的 wpf notifyicon http www codeproject com Articles 36468 WPF No
  • 给出 HTML 和 Xpath 时突出显示

    给定 HTML 作为字符串 Xpath 和偏移量 我需要强调这个词 在下面的例子中我需要强调Child 1 HTML 文本 h2 Children h2 Joe has three kids br ul li a href Child 1
  • 如何判断一个具有很多属性的对象(自身)是否发生了改变?

    问题的简短版本 我有一个带有大量声明属性的类 我想跟踪它是否有任何更改 以便当我调用save方法 当不需要时它不会写入数据库 我如何更新isDirty财产无需为所有声明的属性编写自定义设置器 问题的较长版本 假设我有一堂这样的课 inter
  • 在 MATLAB 中用两个值替换向量值

    我必须创建一个以向量作为输入的函数v和三个标量a b and c 该函数替换了的每个元素v等于a有一个二元素数组 b c 例如 给定v 1 2 3 4 and a 2 b 5 c 5 输出将是 out 1 5 5 3 4 我的第一次尝试是尝
  • 将实体添加到核心数据

    我们有一个使用核心数据的应用程序 在下一个版本中 我想向现有实体添加一个新实体 只需添加新的然后从软件中填充它就可以了吗 还是有什么我必须考虑的事情 迁移有几种类型 最简单的是使用推断映射模型的轻量级迁移 这意味着您只需告诉它进行迁移 软件
  • Linq 中不区分大小写的“包含”

    我有一个 mvc 项目 我在其中使用 linq 在我的数据库中有一些记录 例如 Someth ing SOmeTH ing someTh ing SOMETH ING someTH ING 我想做这个 SELECT FROM dbo doc
  • 需要中继器帮助

    这是我的复读机
  • org.apache.http.entity.FileEntity 在 Android 6 (Marshmallow) 中已弃用

    我正在将应用程序升级到 API 23 其中org apache http已弃用 我当前 已弃用 的代码如下所示 HttpClient httpClient new DefaultHttpClient File file new File a
  • 在批处理模式下运行 R - 打印到屏幕?

    跑步时 R CMD BATCH options filename r 我想控制输出的打印位置 我可以使用以下命令抑制 Rout 文件的创建 R CMD BATCH options filename r dev null 但是否可以将输出直接
  • 回形针回调还是简单的处理器?

    我想运行回调after post process但它似乎无法在使用 Paperclip 2 3 8 的 Rails 3 0 1 中工作 它给出了一个错误 undefined method post process callbacks for
  • 如何解决 Xcode 布局问题?

    我正在为 iPhone 设计布局 因此我为其选择了 wCompact 和 hAny 尺寸类别 我修复了约束 并且在运行时没有问题 但每次我关闭 Xcode 重新打开项目时 都会出现多个约束问题 如图所示 我解决了根据约束更新框架的问题 选择
  • 宏和后置增量

    这是一些更奇怪的宏观行为 我希望有人能够阐明 define MAX a b a gt b a b void main void int a 3 b 4 printf d d d n a b MAX a b 输出为 4 6 5 b 的值增加两
  • 为什么 jQuery 在其构造函数实现中要这样做?

    如果我们查看最新的 jQuery 源代码http code jquery com jquery latest js http code jquery com jquery latest js我们看到以下内容 var jQuery funct
  • RXJS Observable - 如何从 Observable 的构造函数外部调用 next

    我正在构建一个公开 Observable 的服务 在此服务中 我接收外部函数调用 这些函数调用应该触发 Observable 上的下一个调用 以便各个消费者获得订阅事件 在观察者构造函数期间 我可以调用 next 并且一切正常 但是如何在构
  • 如何在 ionic 应用程序中显示 pdf 文件而无需下载

    我所做的事情 在应用程序浏览器中使用 使用谷歌文档 使用的网页视图 所以我尝试了所有这些方法来使用 ionic 在 Android 设备中显示 pdf 文件 但没有用 我可以在所有这些方法中看到下载按钮 谁能告诉我如何在没有用户下载选项的情
  • 尝试解码 JSON 日期时显示“JSON 写入中的类型无效 (__NSTaggedDate)”

    当我尝试从具有日期变量的数据库中解码 JSON 对象时 出现错误 由于未捕获的异常 NSInvalidArgumentException 而终止应用程序 原因 JSON 写入中的无效类型 NSTaggedDate 错误发生在以下代码行 le
  • 如何使用列的平均值将列添加到 DataFrame

    有没有更好的办法 val mean df select avg date first getDouble 0 df withColumn mean lit mean 我认为避免采取行动是值得的 可以使用以下方法避免额外的操作broadcas
  • Highcharts.js 中的列之间的空间

    我有一个柱形图 其中对于每个 X 值我有两个系列 但该图显示每个 X 值之间的间距很宽 在 Highchart 中如何使列和 y 轴之间有 1px 的空间 Update pointPadding 0 2 to pointPadding 0
  • 如何用bunit打开blazored模态?

    我想测试是否可以用bunit打开模态 问题是 模式没有被渲染 如何用bunit打开blazored模态 我的测试组件中的模态创建 div style display flex div
  • 如何均匀地获得任意数量的空间链接?

    好吧 情况是这样的 假设我有一个网站的导航栏 并且我允许用户更改他们想要在此导航栏上的链接数量 这意味着他们可以有 3 5 10 等 我想要做的是 如果有一个链接打开 它只占用导航栏上 1 5 的空间 如果我不使用边框 我可能会这样做 宽度
Powered by Hwhale