首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在CSS3中占据整个ul宽度的均匀间隔的导航链接

在CSS3中,要实现占据整个ul宽度的均匀间隔的导航链接,可以使用flexbox布局和伪类选择器来实现。

首先,需要将ul元素设置为display: flex,这样ul的子元素li会自动排列在一行,并且均匀分布。

然后,可以使用伪类选择器::after来给每个li元素添加一个占位元素,通过设置flex-grow属性为1,使得每个占位元素平均分配剩余空间。

下面是一个示例代码:

HTML:

代码语言:html
复制
<ul class="nav">
  <li><a href="#">链接1</a></li>
  <li><a href="#">链接2</a></li>
  <li><a href="#">链接3</a></li>
  <li><a href="#">链接4</a></li>
</ul>

CSS:

代码语言:css
复制
.nav {
  display: flex;
  list-style: none;
  padding: 0;
}

.nav li {
  flex-grow: 1;
}

.nav li::after {
  content: "";
  flex-grow: 1;
}

这样,每个导航链接会均匀分布在ul的整个宽度上,无论导航链接的数量是多少。

推荐的腾讯云相关产品:腾讯云CDN(内容分发网络),可以加速网站的访问速度,提供更好的用户体验。产品介绍链接地址:https://cloud.tencent.com/product/cdn

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

jQuery类似于幻灯片效果水平时间轴特效源码解析代码下载

该水平时间轴设计上将时间轴和事件内容分离,时间轴在工作上类似幻灯片效果,而某个时间点对应事件占据整个时间轴宽度,并且一次只显示一个事件内容。 ?...ul.cd-timeline-navigation元素用于导航箭头,span.filling-line用于当一个新事件时间点被选择时候时间轴填充效果。...时间轴上日期分布并不是均匀,但是这些日期之间距离比例是一致。 ? main.js文件,使用变量eventsMinDistance来设置两个连续最小日期之间距离。...代码设置是eventsMinDistance = 60 ,表示最小距离为60像素。然后需要获取一个日期和下一个日期之间差值,为了获取这些值,特效为每一个日期都添加了data-date属性。...最小距离将会作为参考来计算两个连续日期之间距离。 举个例子,假设最小日期间隔为5天,那么水平时间轴上5天之间两个时间点距离为60像素,而10天距离就为120像素。

1.8K20

使用CSS Flexbox 构建可靠实用网站 Header

有人可能会说,现在 CSS3 这么普及,制作一个网站 header 不是很容易么 ?? 并非如此,因为有一些有趣挑战需要解决,本文中我们会介绍其中几种。...Header 变化 1 image.png 假设我想要在导航链接旁边添加了一个按钮。这应该如何处理?我们应该把它作为链接添加到导航吗?还是应该和导航分开?我更喜欢这样做。...较小视口上,header 将如下所示: image.png 搜索输入宽度不应小于此宽度,因为这样很难输入和查看全文。...使用 Flexbox 构建 Header 有用技巧 flex-basis 如果某个元素需要在移动设备上占据整个宽度(不能隐藏重要导航),我会使用flex-basis: 100% ?。 ?...有时,可能还有其他元素,我们想确保导航是最后一个。 加上一个等于宽度等于 padding 负 margin,这也会让导航占据整个宽度导航添加 padding,这会增加一些适当空间。

1.7K30

【移动端网页布局】Flex 弹性布局案例 ③ ( 横向导航栏 | 固定定位下面的布局设置 | 设置横向导航栏弹性布局 | 弹性布局主轴和侧轴设置 | 二倍精灵图 )

一、横向导航栏实现核心要点 需求 : 实现如下布局 ; 上一篇博客 , 已经实现了顶部搜索栏 , 本篇博客开始实现后续部分 ; 1、固定定位下面的布局设置 在上一篇博客实现搜索栏 , 使用...上下各有 3 像素外边距 , 左右各有 4 像素外边距 ; 导航栏整体背景为白色 ; 该横向导航 设置了 5 个元素 , 这里可以使用百分比布局实现 , 也可以使用 Flex 弹性布局实现...; 将父容器设置为 Flex 弹性布局 , 同时为子项目设置 flex: 1; 样式 , 这样 5 个子项目平均分配整个宽度尺寸 ; 样式代码 : /* 横向导航栏样式 */ .local-nav...二倍精灵图设置步骤 : 缩小精灵图 : Firework , 将精灵图缩小一半 ; 测量坐标 : 缩小一半精灵图中测量坐标 ; 设置代码 : 将代码 background-size 缩小一半...模型 CSS3 垂直居中是 边框 + 内边距 + 尺寸 总高度垂直居中 */ height: 26px; line-height: 24px; border

43620

Web前端之响应式 Gulp 中文网

方法 本次实验主要应用了CSS3多媒体查询语句(@media),多媒体查询可以指定设备上使用对应样式替代原有的样式。 试题中使用到css属性: !.../css3/css3-mediaqueries.html) 考试需求 max-width 为 1400px 时,页面效果为导航栏、中间列表内容宽度变为900px。...important; } } 2.2宽度max-width为900px时,页面效果为导航栏、中间列表内容宽度变为700px /* 格式需要规范,空格不能少 */ @media screen and...important; } } 2.3 宽度 max-width 为 650px 时,头部导航隐藏,并在右侧显示图标,底部列表宽度为 100%。...Web蓝桥杯线上模拟赛:响应式Gulp中文网,运用技术Css3@media(多媒体查询)样式,解决问题时需要重点关注@media书写格式、css类选择器名、!

2K20

从零开始学 Web 之 CSS3(七)多列布局,伸缩布局

一、多列布局 CSS3新出现多列布局 (multi-column) 是传统 HTML 网页块状布局模式有力扩充。 这种新语法能够让 WEB 开发人员轻松让文本呈现多列显示。...常用属性: column-count: 属性设置列具体个数 column-width: 属性控制列宽度 column-gap: 两列之间缝隙间隔 column-rule: 规定列之间宽度、样式和颜色...比如:如果设置宽度大于自动计算宽度,那么实际显示效果以设置宽度为准;如果设置宽度无法填充整个屏幕,那么实际宽度可能大于设置宽度; 如果设置宽度小于自动计算宽度...CSS3布局方面做了非常大改进,使得我们对块级元素布局排列变得十分灵活,适应性非常强,其强大伸缩性,响应式开发可以发挥极大作用。...stretch:(默认值)拉伸:让子元素侧轴方向上进行拉伸,填充满整个侧轴方向。

4K10

CSS 常见面试题速查

伪类:以冒号为前缀,被添加到一个选择器末尾关键字,样式特定状态下才被呈现到指定元素 CSS 2.1 E:first-child 匹配父元素第一个子元素 E:link 匹配所有未被点击链接...E:lang(c) 匹配 lang 属性等于 c E 元素 CSS3 E:enabled 匹配表单激活元素 E:disabled 匹配表单禁用元素 E:checked 匹配表单中被选中...# 关于媒体查询 是什么 媒体查询由一个可选媒体类型和零个或多个使用媒体功能限制样式表范围表达式组成,例如宽度、高度和颜色 媒体查询 CSS3 中出现,允许内容呈现针对一个特定范围输出设备而进行裁剪...+ content + padding-right + border-right) 现代浏览器默认使用 W3C 标准和模型,可以 CSS3 中使用 box-sizing 自定义 box-sizing...多数显示器默认频率是 60 Hz,即 1 秒刷新 60 次,所以理论上最小间隔为 1/60*1000ms = 16.7ms # 超链接访问过后hover样式就不出现问题是什么?如何解决?

88910

Web-第五天 BootStrap学习

Bootstrap基础入门使用都是自带CSS样式,高级开发需要使用HTML5、CSS3、动态CSS语言Less 进行自定义开发,JavaEE课程中学习时“基础入门”。...视口作用:移动浏览器,当页面宽度超出设备(device),浏览器内部虚拟一个页面容器,将页面容器缩放到设备这么大,然后展示 取值: width=device-width, 视口宽度,大多手机浏览器视口宽度是...--前端开发建议:网站优化时,除了立即需要工作js存放在header外,将大部分js文件放置页面的末尾--> .container-fluid 类用于 100% 宽度占据全部视口(viewport)容器。 ... 例如: <!...-- 1.整个topbar划分比例:1:2:1 2.中间区域只“大屏幕”和“中等屏幕”显示 3.整个区域“超小屏幕”英寸 --> <div class="container topbar hidden-xs

5.1K50

【移动端网页布局】流式布局案例 ⑦ ( 水平排列图片链接 2 | 浮动设置 | 盒子模型类型设置 | 结构伪类选择器 )

一、水平排列图片链接样式及核心要点 ---- 1、实现效果 实现如下样式 , 水平排列图片链接 , 第一个图片占宽度 50% , 第二第三个 链接 占总宽度 25% ; 2、HTML 结构...10% */ width: 10%; } .app ul li:nth-child(2) img { /* 10% 宽度 Logo 盒子 图片宽度是 30 像素...: 33.33%; } .brand div img { /* 设置图片链接图片 水平方向上充满父容器即可 */ width: 100%; } /* 多排按钮导航栏 */...nav { /* 整个导航布局距离顶部 5 像素 */ padding-top: 5px; } nav a { /* 设置左浮动 宽度为 20% 正好能放下 5 个 */...像素 高度自适应 */ width: 40px; /* 上下 10 像素外边距 */ margin: 10px 0; } nav a span { /* 导航文本

2.3K40

【CSS】367- 用 CSS3 制作导航条和毛玻璃效果

1.导航条 1.1:平行四边形导航条 平行四边形制作思想:平行四边形制作运用了CSS3 2D 变形skew()倾斜属性,因为我们只是水平方向上倾斜,所以使用skew()时需要将第二个参数指定为...(hover状态) 1.2:梯形导航条 梯形导航是实现思想:梯形导航条使用了CSS3 3D 变形三个属性:perspective(),rotateX()和transform-origin。...张鑫旭老师一篇关于毛玻璃实现文章(会在参考文章给出链接),给出了毛玻璃实现效果,可是有一些小问题:如果在背景图片上加上文字,blur()会将文字一起模糊掉,这样的话会用户体验不太好。...使用这种方法关键之处在于我们是对伪元素进行了blur()处理,这样并不会影响到父元素文字效果。 2.需要给背景图片添加background-size属性,这个是为了让图片自适应整个屏幕宽度。...3.结束语 三个实例,有一个共同思想:将CSS3倾斜,透视,旋转和滤镜效果都放在伪元素,并且给父元素设置relative,伪元素设置absolute,让伪元素宽度和高度撑满父元素整个区域,最后设置伪元素

1.7K10

【移动端网页布局】流式布局案例 ⑥ ( 多排按钮导航栏 | 设置浮动及宽度 | 设置图片样式 | 设置文本 )

一、多排按钮导航栏样式及核心要点 1、实现效果 要实现下面的导航栏效果 ; 2、总体布局设计 该导航栏可使用 10 个 标签盒子 进行制作 ; 该导航宽度自动充满整个屏幕 , 宽度为..., 水平排成两排 , 每排 5 个 , 为其设置左浮动即可实现 , 同事设置其宽度为 20 像素 ; 除了图片外 , 每个链接还有一行文字 , 设置文字水平对对齐 nav { /* 整个导航布局距离顶部...: 10px 0; } 5、设置文本 链接文本 , 放在 标签 , 该标签宽度默认充满父容器 , 高度自适应 ; 将其设置为 block 块级元素 , 就可以放置图片下方 ;...10% */ width: 10%; } .app ul li:nth-child(2) img { /* 10% 宽度 Logo 盒子 图片宽度是 30 像素...: 33.33%; } .brand div img { /* 设置图片链接图片 水平方向上充满父容器即可 */ width: 100%; } /* 多排按钮导航栏 */

3.2K40

CSS-02

">登录 不修改以上代码前提下,完成以下任务: 主导航栏和侧导航栏里面文字都是18像素并且是微软雅黑。...链接登录颜色为红色。 主导航栏里列表文字颜色为深灰色。 收藏本站要求字体加粗。 我们网页标签非常多,不同地方会用到不同类型选择器,以便更好完成我们网页。 <!...# 块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构搭建。...行内元素特点: (1)和相邻行内元素一行上。 (2)高、宽无效,但水平方向padding和margin可以设置,垂直方向无效。 (3)默认宽度就是它本身内容宽度。...# 背景缩放(CSS3) 通过background-size设置背景图片尺寸,就像我们设置img尺寸一样,移动Web开发做屏幕适配应用非常广泛。

2K30

【CSS】课程网站 Banner 制作 ① ( Banner 栏测量 | Banner 盒子模型代码 | 代码示例 )

背景颜色值 #1c036c ; 使用 " 移动工具 " , 勾选 自动选择 选项 , 选择图层 , 点击 背景图片 后 , 会自动选择 该图片所在图层 , Cutterman , 点击...浏览器居中对齐 */ .w { width: 1200px; margin: auto; } /* 头部盒子样式 */ .header { /* 高度 42 像素 */ height...ul li { /* 设置 无序列表项 从左到右排列 */ float: left; } /* 设置无序列表链接样式 */ .nav ul li a { /* 显示模式 块级元素 */...*/ text-decoration: none; /* 调试时使用背景 */ /*background: skyblue;*/ } /* 鼠标经过链接样式 */ .nav ul li...a:hover { /* 鼠标经过导航链接 , 底部显示 2 像素 #00a4ff 颜色实线 */ border-bottom: 2px solid #00a4ff; } /* 搜索栏盒子模型

3.9K20

【CSS】课程网站网页底部开发 ( 网页底部盒子模型测量及样式 | 代码示例 )

; /* 版心宽度 1200 像素 , 浏览器居中对齐 */ .w { width: 1200px; margin: auto; } 4、版权盒子 整个 版权盒子 版心盒子...整个链接模块盒子 网页底部右侧 , 这里设置右浮动 ; /* 整个链接模块盒子 右浮动 */ .links { float: right; } 列表项 标题 16 像素 , 颜色值 #666666...; 最终 CSS 样式为 : /* 整个链接模块盒子 右浮动 */ .links { float: right; } /* dl 列表设置 链接 盒子左浮动 */ .links dl {...ul li { /* 设置 无序列表项 从左到右排列 */ float: left; } /* 设置无序列表链接样式 */ .nav ul li a { /* 显示模式 块级元素 */...这里需要将盒子宽度从 1200 像素修改为 1215 像素 正好放 5 盒子 + 5 间隙*/ width: 1215px; } /* 网格 ul 列表每个列表项样式 */ .

4.1K30

css学习笔记,持续记录。

: center;   //当网格长小于整个容器时,整个网格父容器内上下对齐方式  (口内一个田) justify-content: center;  //当网格宽小于整个容器时,整个网格父容器内左右对齐方式...视觉视口宽度 = 理想视口宽度 / 缩放比例 参考链接:https://blog.csdn.net/leman314/article/details/111936863 13. px px大小不同屏幕上是一样...HTML,如果你用空格键产生此空格,空格是不会累加(只算1个)。...要使用html实体表示才可累加,该空格占据宽度受字体影响明显而强烈, 此空格其占据宽度正好是1/2个中文宽度,而且基本上不受字体影响。... 此空格其占据宽度正好是1个中文宽度,而且基本上不受字体影响。

2.6K60

【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )

像素 左内边距 ; 右侧文字 , 距离测导航右侧有 20 像素右内边距 ; 测量 测导航栏 文本间隔 , 也就是行高 , 从上一行开始到下一行开始位置 , 行高 44 像素 ;...左侧导航 背景是 黑色半透明 背景 ; 使用吸管工具 , 吸取 鼠标移动到 侧导航栏 上颜色值 为 #00b4ff ; 侧导航 , 默认状态下 , 文字默认颜色为白色 ; 二、... 列表项 链接样式 */ .subnav li a { /* 默认情况下为白色 */ color: #fff; /* 字体大小 14 像素 */ font-size: 14px; /*...ul li { /* 设置 无序列表项 从左到右排列 */ float: left; } /* 设置无序列表链接样式 */ .nav ul li a { /* 显示模式 块级元素 */...6 像素 */ margin-left: 6px; } /* Banner 条样式 */ .banner { /* 宽度自动填充整个浏览器, 这里只设置高度 */ height: 420px;

3.3K50

0行JS,30行css搞定导航栏下划线跟随效果

解析 我们定义一下简单规则,要求如下: 1、假设 HTML 结构如下: Web秀 CSS导航栏 今日头条... 开源中国 2、li 宽度是不固定 3、当从左侧 li 移向右侧 li,下划线从左往右移动。...同理,当从导航右侧 li 移向左侧 li,下划线从右往左移动。 看整个效果,我们不知道如何做起时候,我们先一步一步来,先完成前2个效果。...这里用到了flex布局,相信一直和我一起学习小伙伴,应该都会了,这里不做过多解释了,不明白,请看: 《CSSFlex布局可伸缩性(Flexibility)》 《CSS3Flex布局(弹性布局...所以,我们利用绝对定位,将 li 伪元素宽度设置为0, hover 时候,宽度从 width: 0 -> width: 100%,CSS 如下: li::before { content

3.2K20

bootstrap使用教程_bootstrap 教程

使用导航条组件 导航条位于页面最顶部,提供整个网站所有页面的链接, ,然后把第一个 class 指定为 active ,表示激活状态。 刷新页面,一个漂亮导航条就诞生了!...栅格可以理解为一个安全门,它总长度可以拉长,可以缩短,但是总间隔数量是不变,并且所有间隔宽度都一样。 这个伸缩过程,像不像我们把浏览器拉宽、变窄操作?...Bootstrap 栅格系统规定了每个页面的宽度被平均划分为 12 等份,不管整个页面的宽度是 1000像素,还是500像素,都会自动计算每一份(1/12)宽度是多少。...通过给栅格布局内部元素指定 class 为 col-md-份数 ,来告诉它宽度占据这12份里面的几份。

16.8K20

谈谈一些有趣CSS题目(七)-- 消失边界线问题

7、消失边界线问题 看看下图,经常会在一些导航见到,要求每行中最后一列右边框消失,如何在所有浏览器中最便捷优雅实现? ?...如果是不需要兼容 IE8- ,那么使用 CSS3 新增选择器无疑是一种好方法。...> 如图中所示,假定每行排列 3 个 li ,每个 li 宽 100px ,我们 ulul-container 宽度都设为 300px 。...这样 ul 第一列所有边框都因为左移了一像素并且被 overflow:hidden 而消失了,造成了下一个 li 右边框看着像左边框一样,其实只是个障眼法: .ul-container{ overflow...Demo戳我 这种做法可以适应不同 li 个数不同行数所有情况,因为每个新添加 li ,都会生成一个左边框与上一个 li 元素分开,只是视觉上看上去像是上一个 li 元素右边框。

51030

【CSS】课程网站 网格商品展示 模块制作 ② ( 网格商品展示盒子模型测量及样式 | 处理列表间隙导致意外换行问题 | 代码示例 )

像素 正好放 5 盒子 + 5 间隙*/ width: 1215px; } /* 网格 ul 列表每个列表项样式 */ .box-bd li { /* 设置左浮动 让列表项一行从左到右排列...这里需要将盒子宽度从 1200 像素修改为 1215 像素 正好放 5 盒子 + 5 间隙*/ width: 1215px; } /* 网格 ul 列表每个列表项样式 */ ....*/ body { background-color: #f3f5f7; } /* 版心宽度 1200 像素 , 浏览器居中对齐 */ .w { width: 1200px;...ul li { /* 设置 无序列表项 从左到右排列 */ float: left; } /* 设置无序列表链接样式 */ .nav ul li a { /* 显示模式 块级元素 */...这里需要将盒子宽度从 1200 像素修改为 1215 像素 正好放 5 盒子 + 5 间隙*/ width: 1215px; } /* 网格 ul 列表每个列表项样式 */ .

2.3K20
领券