css中li下边框盖住ul下边框问题

最新推荐文章于 2023-01-04 17:47:22 发布
最新推荐文章于 2023-01-04 17:47:22 发布
阅读量4.7k 收藏 1
点赞数 2
分类专栏： 学习笔记 文章标签： css ul border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/runOnWay/article/details/79073824
版权

在用ul标签做tab栏时，想实现ul一个底边框线是统一的颜色，在当前li上，要给li一个其他颜色的底边框线，盖住ul的底边框线。实现以下效果
这里写图片描述
灰线是ul的线，红线是li的线。我发现无论如何写，li的高度加上边框线的高度都会把ul高度撑开，始终都会露出ul的线。
灵机一动，把ul放在一个div盒子中，给div设置底边框线，再设置一个合适的高度，而不给ul设置。
完美解决

runOnWay
关注
专栏目录
css重点9：li盒子放不进div盒子时的问题，并且消除重叠边框
小黄呀呀呀的博客
05-03 1092
1、li放不进去的问题 最外面的div盒子长度固定，最里面的li盒子的长度也固定，如何将li放在div盒子里。（想要实现的效果是1行4个） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <...
自定义html下拉选择框,CSS自定义select下拉选择框的样式(不用其他标签模拟)
weixin_34401008的博客
06-03 1631
今天群里有人问到怎么自定义select下拉选择框的样式，于是群里就展开了激烈的讨论，刚开始一直就是考虑怎样使用纯CSS实现，把浏览器默认的样式覆盖掉，但最后均因兼容问题处理不好而失败告终，最后的解决方案就是用其他的元素(如ul,li)模拟下拉菜单，或者是使用网上一些现成的插件。其实select这个东西只靠纯CSS是不能解决这个自定义样式问题的，但既然折腾了这么久，还是说一下CSS实现的思路吧。首...
下面一行的li覆盖住前面的li
weixin_43145591的博客
03-16 293
在给父元素添加了相对定位，给子元素添加了绝对定位。 父元素是一个div，子元素是li 这样多行li，无法显示，下面一行的li会覆盖住前面的li只显示一行li ...
ul li边框问题
gxr1018的博客
08-27 2547
.rt-box ul{ height: 28px; line-height: 28px; font-size: 13px; color: #999999; li{ border: 1px solid #EEF0F6; float: left; width: 48px; text-align: center; cursor: pointer; box-sizing: border-box } li...
ui的li的子元素被遮盖
qq_38787102的博客
07-23 397
抛出问题图片 先抛出解决办法： <header class="listview-header media" id="h_Header" style="overflow:visible;height: 56px"> <table style="float: right;"> <span style="font-size: 18px;" id="second-title"></span> <tr>
分清ul和li的边界
enzyco的博客
01-17 583
接触代码时间刚1周，最近学到内外边距，在把外边距取值为0的时候，常常遇到设定padding为0了，但是两个表格中间任然留白的情况。 可发现标签“a、p、h4”的外边距都为0，但是标签“li”有些格格不入，任有留白的地方。通过F12查看。发现： 留白的地方为“ul”，因此在设置padding的时候，标签需要选择“ul”，修改如下： 边距问题是解决了，但是表格的问题有暴露出来，两个“li”中间的表格线没有了。当然这个问题比较简单，对要修改的标签重新编辑即可。 此时，我们发现第三、四排之间存在重复的横线，查
ul导航条二级菜单被遮盖
qq_42655885的博客
07-12 1849
遮盖二级菜单
CSS自定义select下拉选择框的样式(不用其他标签模拟)
12-12
今天群里有人问到怎么自定义select下拉选择框的样式，于是群里就展开了激烈的讨论，刚开始一直就是考虑怎样使用纯CSS实现，把浏览器默认的样式覆盖掉，但最后均因兼容问题处理不好而失败告终，最后的解决方案就是用...
css基础以及css3
最新发布
m0_72711350的博客
01-04 665
css
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6478
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
border边框重叠问题（li的border不能覆盖ul的border）
大桶爆米花eee
07-16 1476
在用ul标签做tab栏时，想实现ul一个底边框线是统一的颜色，在当前li上，要给li一个其他颜色的底边框线，盖住ul的底边框线。实现以下效果 灰线是ul的线，蓝线是li的线。然后发现li的高度加上边框线的高度会把ul高度撑开，始终都会露出ul的线。 之后把li的高度设为 ul高度+border的高度，之后在设置li的border就会刚好覆盖ul的border了。 ...
web html边框右下对齐,CSS如何使<li>对齐<ul>的下边框？_html/css_WEB-ITnose
weixin_39891272的博客
06-09 438
下部要对齐……你这个需求是矛盾的。根据lz的设置，ul还有li都是浮动的，其中li浮动的从左至右排列开来，你想在选中的那个li变换样式，行高也调大了6px，这样的后果就是 把ul的高度给撑大了，其他的li会空出一部分东西来呀。选项卡效果没必要这样改变字体，你可以设置斜面效果(通过设置border 左上边框，右下边框)等来突出显示当前选项。你这个需求是矛盾的。根据lz的设置，ul还有li都是浮动的，...
ul li、a标签的下划线
weixin_30673715的博客
07-12 3198
<style type="text/css"> li { list-style: none;}//控制li的·标记 a { text-decoration: none;} //下划线 a:hover { text-decoration: underline; } </style> 　　 javascript:show();控制链接触发...
ul li列表元素浮动导致border没有底边解决办法
weixin_33817333的博客
12-20 334
如图，当ul li，li元素浮动，并且ul元素也overflow:hidden清除浮动的时候，给li元素加了border,但是不显示底边，这时候要看是不是没有给li元素加高，因为加了border之后默认li的高度会继承ul的，再加上border的像素则超出了ul的高度，而高度设置了overflow：hidden;所以被遮盖住了其中一个边。 ul{ width:60%; ...
css 如何让文字标题显示在边框上
神zhi殇的博客
12-26 4094
方法一、 &lt;style&gt; .box{ position:relative; border:1px solid red; } .box::before{ content:attr(title); position:absolute; left:50%; transfor...
html1px灰色虚线边框,CSS中1px虚线边框的方法
weixin_35703208的博客
06-07 1252
1PX的概念错误h3{position:absolute;top:-15px;left:30px;margin:0;padding:0 5px;line-height:25px;background:red;border:1px solid #000;}.outer ,.outer2 {position:relative;float:left;width:300px;border:2px dash...
使用CSS把ul,li制作成表格
u011927449的博客
07-06 1244
查看效果：http://hovertree.com/texiao/css/7.htm具体实现请看样式部分。完整代码： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>使用CSS把ul,li制作成表格-何问起</title><base target="_blank" /
CSS3之解决相邻border重合加粗问题
杨筱斌的博客
11-06 9012
解决这个问题的 方法 是 ： 在 该元素 上设置 相关方向 的 margin为-1px; 如果需要 伪类显示 的话，在 该元素的伪类 中加 相对定位，目的是将 被压住 的 border 显示出来 如果 还需要 在 此元素 上加 拥有绝对定位的其它元素，那么在 该元素 上加 相对定位，在 该元素的伪类 上加 z-index 属性   下面两个例子就是利用了这个方法！！！ 代码示例...
前端——子元素覆盖父元素的边框的四种方式
热门推荐
Searchin_R的博客
10-15 1万+
平常我们在浏览网站的时候经常会看到这样的菜单栏： 看到这个，有些人不禁会想，这是如何做的呢？？？ 有人说：“border！！！！” 对，的确是border，但是要怎么用呢？？？ 上面一共有三个div，莫非要给三个div都设置border属性？那也忒麻烦了~ 这里本帅博主给大家介绍几种更高富帅的方法~ 1.子元素定位 遮盖父元素的border-bottom  写一个div，颜色为白...
CSS布局技巧：如何控制UL LI样式
在网页设计中，`<ul>` 和 `<li>` 标签用于创建无序列表，它们在配合CSS样式时，可以实现各种自定义布局和设计。在这个例子中，我们看到一个简单的导航菜单的实现，其中`<div id="menu">` 包含了一个无序列表，每个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值