css怎样让导航词语间隔,css - 导航分隔符
css - 导航分隔符
我需要在导航元素之间添加分隔符。 分隔符是图像。
我的HTML结构如下:ol> li> a> img。
在这里,我得出两个可能的解决方案
要添加更多li标签进行分离(嘘!),
在每个元素的图像中包含分隔符(这是更好的,但它使用户可以点击,例如,“主页”,但是到“服务”,因为它们是一个在另一个之后,用户可能会意外地点击分隔符 属于“服务”);
该怎么办?
9个解决方案
126 votes
如果没有迫切需要将图像用于分隔符,则可以使用纯CSS执行此操作。
nav li + li:before{
content: " | ";
padding: 0 10px;
}
这会在每个列表项之间添加一个条,就像所描述的原始问题中的图像一样。 但由于我们使用的是相邻的选择器,因此它不会将条形放在第一个元素之前。 由于我们使用的是:before伪选择器,因此它不会在最后放置一个伪选择器。
jrue answered 2019-07-11T07:20:51Z
63 votes
只需在li上使用分隔符图像作为背景图像即可。
要使其仅显示在列表项之间,请将图像放在li的左侧,但不要放在第一个图像的左侧。
例如:
#nav li + li {
background:url('seperator.gif') no-repeat top left;
padding-left: 10px
}
此CSS将图像添加到跟随另一个列表项的每个列表项 - 换句话说,所有这些列表项除了第一个列表项之外。
NB。 请注意,相邻选择器(li + li)在IE6中不起作用,因此您只需将背景图像添加到常规li(使用条件样式表),并可能对其中一个边应用负边距。
ajcw answered 2019-07-11T07:20:17Z
3 votes
另一个解决方案是正常的,但是如果使用:之后或者在开始时使用:之前,则无需在最后添加分隔符。
所以:
案例:之后
.link:after {
content: '|';
padding: 0 1rem;
}
.link:last-child:after {
content: '';
}
案例:之前
.link:before {
content: '|';
padding: 0 1rem;
}
.link:first-child:before {
content: '';
}
T04435 answered 2019-07-11T07:21:45Z
3 votes
要使分隔符相对于菜单文本垂直居中,
.menustyle li + li:before
{
content: " | ";
padding: 0;
position: relative;
top: -2px;
}
user7149870 answered 2019-07-11T07:22:14Z
2 votes
将分隔符添加到li背景,并确保链接不会展开以覆盖分隔符,这意味着分隔符将无法单击。
Soufiane Hassou answered 2019-07-11T07:22:40Z
2 votes
您可以在要添加分隔符的位置添加一个li元素
- your content
- NExt content
- last item
在CSS中,您可以添加以下代码。
.divider-vertical-second-menu{
height: 40px;
width: 1px;
margin: 0 5px;
overflow: hidden;
background-color: #DDD;
border-right: 2px solid #FFF;
}
这将提高您的执行速度,因为它不会加载任何图像。 试试吧.. :)
Rajiv Pingale answered 2019-07-11T07:23:24Z
2 votes
对于那些使用Sass的人,我为此目的编写了一个mixin:
@mixin addSeparator($element, $separator, $padding) {
#{$element+'+'+$element}:before {
content: $separator;
padding: 0 $padding;
}
}
例:
@include addSeparator('li', '|', 1em);
哪个会给你这个:
li+li:before {
content: "|";
padding: 0 1em;
}
d4nyll answered 2019-07-11T07:23:54Z
1 votes
将其作为list元素的背景:
...
#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;}
/* left padding creates a gap between links */
接下来,我建议使用不同的可访问性标记:
不是将图像嵌入到内嵌中,而是将文本放入文本中,用跨度围绕每个图像,将图像作为背景应用,然后使用display:none隐藏文本 - 这样可以提供更多样式灵活性,并允许您 使用1px宽bg图像的平铺,节省带宽,你可以将它嵌入到CSS精灵中,这样可以节省HTTP调用:
HTML:
- link text
...
link text
CSS:
#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;}
#nav a{background: url(/images/nav-bg.gif) repeat-x;}
#nav a span{display:none;}
UPDATE好吧,我看到其他人在我之前得到了类似的答案 - 我注意到约翰还包括一种方法,可以通过使用li + li选择器来保持分隔符出现在第一个元素之前 - 这意味着任何li都会在另一个li之后出现。
Faust answered 2019-07-11T07:24:50Z
1 votes
我认为最好的解决方案是我使用的,这是一个自然的CSS边界:
border-right:1px solid;
您可能需要像以下一样处理填充:
padding-left: 5px;
padding-right: 5px;
最后,如果你不想让最后一个li有这个独立的边框,那么在“border-right”中给它的最后一个孩子“none”,如下所示:
li:last-child{
border-right:none;
}
祝好运 :)
Avi answered 2019-07-11T07:25:34Z
css怎样让导航词语间隔,css - 导航分隔符相关推荐
- 蓝色箭头间隔css导航菜单代码
蓝色箭头间隔css导航菜单代码 演示图片: 详细代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- 【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )
文章目录 一.盒子测量及样式 1.总体盒子测量及样式 2.左侧盒子测量及样式 3.中间盒子测量及样式 4.右侧盒子测量及样式 二.横版导航栏代码示例 1.HTML 标签结构 2.CSS 样式 3.显示 ...
- html 隐藏_HTML实战篇:纯css制作二级横向以及竖向菜单导航
本篇文章主要给大家介绍一下如何使用html+css完成二级横向以及竖向菜单导航制作:菜单导航是网站建设中最常用的一块了,基本每个网站内都会有个导航菜单,用鼠标划过还可以有下拉子菜单. 由上图我们可以 ...
- 【HTML+CSS】页内侧边导航栏 页内导航
页内侧边导航栏 页内导航 源码 HTML部分 CSS部分 效果 源码 HTML部分 <!DOCTYPE html> <html><head><meta cha ...
- Html+Css新手简单快速仿京东商品分类导航
看一看最终的效果: 下面我们就按照分析→设计→实现 三大步骤来完成这个导航的效果,学会了之后,会发现大多数电商都是用这样的效果的. 我们先从把结构写好:一个nav包含上面一个div(全部商品分类),一 ...
- 摘自迅雷视频网站基于CSS+HTML实现大气清新的蓝色导航
代码简介: 这个导航条做的不错,是模仿迅雷视频网站的,完全基于CSS和HTML代码,大气清新,请运行一下看看效果如何. 代码内容: <html xmlns="http://www.w3 ...
- 阴阳师官网导航栏 html+css
阴阳师官网导航栏 通过css html实现阴阳师官网的顶部导航栏 具体样式 下拉列表 下拉列表的实现 下面一起看看代码 <div class="header">< ...
- css + HTML 实现京东app左右拖动导航栏
css + HTML 实现京东app左右拖动导航栏 也可实现图片左右拖动(原理一样的) 京东app左右拖动导航栏效果: 图片左右拖动效果: 只写导航栏如下,因为图片原理一样 只需css定义两个盒子模型 ...
- HTML5导航下划线,CSS导航下划线实现
在做页面的时候发现页面导航栏有一个很棒的效果.具体的效果就是,当鼠标移到一个导航栏时,导航栏下方会缓慢出现一条线. 当用ui内联的方式实现普通的导航后,在html中的li添加一个class用来控制下划 ...
最新文章
- antd Form 表单验证
- ecshop将编辑器更换为kindeditor
- Oracle中如何使用imp语言导入dmp文件
- Java入门算法(动态规划篇2:01背包精讲)
- 关于国内部分电子病历编辑器的评价
- 详解3D点云分割网络 Cylindrical and Asymmetrical 3D Convolution Networksfor LiDAR Segmentation
- mysql三大范式 答案_数据库逻辑设计之三大范式通俗理解,一看就懂,书上说的太晦涩...
- 设置Exchange 通讯组接收外部组织邮件
- 神州数码DCWS学习日志
- 软件测试工程师年终总结模版,软件测试工程师岗位工作总结汇报报告范文模板...
- 收藏有关信号处理的博客
- 百度网盘下载加速(pc端)
- 量化策略“高股息率模型”长期有效性的实证
- 让更多的学生掌握“元知识”才是大学的使命
- 引导区坏 计算机无法启动,小白告诉你Win10无法正常启动修复引导文件教程
- 数字平原制作手游场景《仙境》
- PyQt5 | PyQt5环境配置及组件介绍
- 绥化学院学报杂志绥化学院学杂志社绥化学院学报编辑部2022年第9期目录
- cad视口缩放区域怎么使用_cad视口(cad布局和视口使用教程)
- 全球最顶级的电脑配置_世界十大饼干排行榜,全球十大最著名顶级饼干排名