搜索内容

解决li标签border的重叠问题

东明兄 • 2018-03-21 • 开发笔记 • 6735 阅读

chat

做一个在网页左侧显示的菜单，使用ul列表，给每个li标签加上border后会出现与相邻li标签border叠加的情况：

解决方法：给li在样式中指定margin-top:-1px; 这样两个边框就可以重叠在一起了：

扩展：给li是加hover，就是鼠标悬停就会边框变色，这样一来，每个变色的只会是上左右三条框，下边框会被盖住，解决方案：在li:hover里添加 z-index，让他在最上层显示就可以了

版权声明：
作者：东明兄
链接：https://blog.crazyming.com/note/281/
来源：CrazyMing
文章版权归作者所有，未经允许请勿转载。

THE END

html/css

二维码

海报

解决li标签border的重叠问题

做一个在网页左侧显示的菜单，使用ul列表，给每个li标签加上border后会出现与相邻li标签border叠加的情况：解决方法：给li在样式中指定marg……

CSS3实现鼠标移入时图片放大动画

[转载]CSS绝对定位中bottom、right参照点问题

下一篇>>

chat

相关推荐

开发笔记

Android 的 API Level 与 Android 系统版本号对应关系

Android 的 API Level 是一个整数值，它唯一地标识了框架 API 的修订版本。每个版本的 Android 系统都有一个特定的 API Level。 Android 版本号 API L……

东明兄 2024-11-13

65 0
开发笔记

changeset 预发布模式下.changeset目录的处理方式

在使用 Changesets 进行版本管理时，pnpm changeset version 通常会在正常发布过程中删除 .changeset 目录下的 markdown 文件。这些文件是用来记录变更日志和……

东明兄 2024-10-31

50 0
开发笔记

统一行尾符号格式，处理eslint Delete ‘␍’报错

ESLint 检查到 Windows 样式的 CRLF 行尾，并提示删除其中的 r（即 ␍，回车符），希望将其改为 Unix 风格的 LF。不同操作系统之间的行尾符号格式不同，……

东明兄 2024-10-15

90 0

发表评论

取消回复

共有 5 条评论

TESTV

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36
哈哈 :roll: :roll: :roll:

2019-05-25 17:13 回复
1. CrazyMing@TESTV
  
  Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36
  ~~
  
  2019-05-27 14:03 回复
匿名

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36
:?:

2019-08-29 15:07 回复
匿名

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.25 Safari/537.36 Core/1.70.3730.400 QQBrowser/10.5.3801.400
:smile: 有点意思

2019-09-05 10:24 回复
匿名

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36
margin-top:-1px; 高度不就变了如果ul高度固定，岂不会留白？

2020-12-14 10:05 回复