html 圆圈项目符号,html – 列表项下的项目符号

因此,我对您的代码进行了一些更改,以解决您的问题：

>增加子弹从顶部的距离

>通过左侧居中：50％和translateX(-50％)

>将子弹设置为绝对位置,并将其父级li设置为相对位置,否则只要将鼠标悬停在其上,链接就会略微向右移动(并且中心部分会稍微困难)

您可以查看下面的代码段以查看最终结果：

.top-menu-left ul {

list-style: none;

}

.top-menu-left ul li {

display: inline-block;

position: relative;

}

.top-menu-left ul li + li {

margin-left: 25px;

}

.top-menu-left ul li a:hover:before {

content: "\2022";

position: absolute;

top: 1em;

left: 50%;

translate: translateX(-50%);

}

FASHION
TRAVEL

编辑：

由于您试图将项目符号放在列表项之后,您应该使用after伪元素(感谢@ErickPetrucelli).

如果你愿意,你仍然可以通过右(而不是左)和translateX来定位它,或者如果你不想这样做,你可以改为采用以下方法：

.top-menu-left ul li a:hover:after {

[...]

display: block;

width: 100%;

text-align: center;

}

两种技术之间只有一个小的区别：通过左边定位：0或右边：0和translateX(-50％)只占用子弹所需的空间(左图),通过display：block和text-align：center将区域拉伸到整个区域(右图).

结论：

考虑到您可能只展示上述子弹,使用哪种方法无关紧要.

但是让我们说你想在链接下面显示一些文字,然后display：block方法可能会更好地为你服务,因为它允许文本很好地包装(右图),就像前一种方法一样,文本不会’ t居中并会溢出(左图).

html 圆圈项目符号,html – 列表项下的项目符号相关推荐

html项目符号正方形,html – 列表项下的项目符号
因此,我对您的代码进行了一些更改,以解决您的问题: >增加子弹从顶部的距离 >通过左侧居中:50%和translateX(-50%) >将子弹设置为绝对位置,并将其父级li设置为相对 ...
RTOS学习笔记--FreeRTOS的列表和列表项
RTOS学习笔记–FreeRTOS的列表和列表项本文基于正点原子RTOS开发指南,笔记自用,获取详细信息请关注正点原子官方账号列表和列表项的简介列表是 FreeRTOS 中的一个数据结构,概念上 ...
动态渲染element组件el-table表头项+自定义el-table列表项
动态渲染el-table表头项+自定义el-table列表项现在不少项目的表格需要结合穿梭框动态显示表头有哪些项,但按照el-table原本的设置,有多少项就直接在html写多少个el-table- ...
flutter 项目实战四列表数据展示
本项目借用逛丢网站的部分数据,仅作为 flutter 开发学习之用. 逛丢官方网址:https://guangdiu.com/ flutter windows开发环境设置 flutter 项目实战 ...
针对新手的Java EE7和Maven项目–第1部分–简单的Maven项目结构–父pom
为什么呢很多时候,我在日常工作中试图解决一些基本或复杂的Maven / Java EE项目结构问题. 为了提供解决方案,我经常最终会尝试项目结构,测试我在不同应用程序服务器上的部署并细化我的配置. ...
Linux部署tomcat项目的方法,使用linux部署tomcat项目
1.下载对应的Tomcat服务器包 Apache Tomcat官网下载: http://tomcat.apache.org/download-70.cgi 比如我们使用的是 apache-tomca ...
在Python中给定包含该项目的列表的情况下查找项目的索引
对于列表["foo", "bar", "baz"]和列表"bar" ,如何在Python中获取其索引(1)? #1楼 a ...
html三角形无序列表样式,Keynote创建项目符号列表或编号列表
文本框会添加到幻灯片上. 选择要格式为列表的文本,然后从中选取一个选项. 2.选定了文本框后,在"格式"检查器的"文本"面板中,从"项目符号与列表& ...
html去除文章符号,HTML中怎么去除列表项符号
在HTML中,可以通过在列表标签(ul.ol)中,使用style属性添加"list-style-type:none;"样式来去除列表项符号.list-style-type属性可设置 ...

html 圆圈项目符号,html – 列表项下的项目符号

html 圆圈项目符号,html – 列表项下的项目符号相关推荐

最新文章

热门文章