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

最新推荐文章于 2021-07-23 10:00:29 发布
原创 最新推荐文章于 2021-07-23 10:00:29 发布 · 4.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #ul #border

本文介绍了一种利用CSS实现美观的Tab栏底边框的方法。通过将ul元素放置在一个div容器内，并给该容器设置底边框及特定高度，而非直接设置ul的底边框，从而解决了li元素高度撑开ul高度导致底边框显示不一致的问题。

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

css重点9：li盒子放不进div盒子时的问题，并且消除重叠边框
小黄呀呀呀的博客
05-03 1220
1、li放不进去的问题 最外面的div盒子长度固定，最里面的li盒子的长度也固定，如何将li放在div盒子里。（想要实现的效果是1行4个） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <...
day10 - CSS单位、标签显示模式、盒模型、外边距、内边距、继承、边框
u010544438的博客
08-08 78
CSS基础与盒模型摘要 本文涵盖了CSS基础知识和盒模型的核心概念。主要内容包括： CSS单位：介绍了px(固定单位)、em(相对当前元素字体大小)、rem(相对根元素字体大小)和百分比单位的使用方法。 标签显示模式：详细讲解了块元素(独占一行、默认撑满父元素)、行内元素(水平排列、宽高无效)和行内块元素(水平排列、宽高有效)的特性及常见标签类型。 盒模型：解释了内容区(content)、内边距(padding)、边框(border)和外边距(margin)四个组成部分及其计算方式。盒子大小=内容+边框+内
下面一行的li覆盖住前面的li
weixin_43145591的博客
03-16 357
在给父元素添加了相对定位，给子元素添加了绝对定位。 父元素是一个div，子元素是li 这样多行li，无法显示，下面一行的li会覆盖住前面的li只显示一行li ...
ul li边框问题
gxr1018的博客
08-27 2629
.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 478
抛出问题图片 先抛出解决办法： <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 681
接触代码时间刚1周，最近学到内外边距，在把外边距取值为0的时候，常常遇到设定padding为0了，但是两个表格中间任然留白的情况。 可发现标签“a、p、h4”的外边距都为0，但是标签“li”有些格格不入，任有留白的地方。通过F12查看。发现： 留白的地方为“ul”，因此在设置padding的时候，标签需要选择“ul”，修改如下： 边距问题是解决了，但是表格的问题有暴露出来，两个“li”中间的表格线没有了。当然这个问题比较简单，对要修改的标签重新编辑即可。 此时，我们发现第三、四排之间存在重复的横线，查
ul导航条二级菜单被遮盖
qq_42655885的博客
07-12 1959
遮盖二级菜单
ulli边框
最新发布
10-16
### 解决li下边框盖住ul下边框问题 当使用ul标签做tab栏，要实现ul有统一颜色的底边框线，当前li有其他颜色底边框线并盖住ul底边框线时，可把ul放在一个div盒子中，给div设置底边框线，再设置合适的高度，而不给ul...
CSS自定义select下拉选择框的样式(不用其他标签模拟)
12-12
今天群里有人问到怎么自定义select下拉选择框的样式，于是群里就展开了激烈的讨论，刚开始一直就是考虑怎样使用纯CSS实现，把浏览器默认的样式覆盖掉，但最后均因兼容问题处理不好而失败告终，最后的解决方案就是用...
自定义html下拉选择框,CSS自定义select下拉选择框的样式(不用其他标签模拟)
weixin_34401008的博客
06-03 1720
今天群里有人问到怎么自定义select下拉选择框的样式，于是群里就展开了激烈的讨论，刚开始一直就是考虑怎样使用纯CSS实现，把浏览器默认的样式覆盖掉，但最后均因兼容问题处理不好而失败告终，最后的解决方案就是用其他的元素(如ul,li)模拟下拉菜单，或者是使用网上一些现成的插件。其实select这个东西只靠纯CSS是不能解决这个自定义样式问题的，但既然折腾了这么久，还是说一下CSS实现的思路吧。首...
border边框重叠问题（li的border不能覆盖ul的border）
大桶爆米花eee
07-16 1613
在用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 487
下部要对齐……你这个需求是矛盾的。根据lz的设置，ul还有li都是浮动的，其中li浮动的从左至右排列开来，你想在选中的那个li变换样式，行高也调大了6px，这样的后果就是 把ul的高度给撑大了，其他的li会空出一部分东西来呀。选项卡效果没必要这样改变字体，你可以设置斜面效果(通过设置border 左上边框，右下边框)等来突出显示当前选项。你这个需求是矛盾的。根据lz的设置，ul还有li都是浮动的，...
ul li、a标签的下划线
weixin_30673715的博客
07-12 3316
<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 376
如图，当ul li，li元素浮动，并且ul元素也overflow:hidden清除浮动的时候，给li元素加了border,但是不显示底边，这时候要看是不是没有给li元素加高，因为加了border之后默认li的高度会继承ul的，再加上border的像素则超出了ul的高度，而高度设置了overflow：hidden;所以被遮盖住了其中一个边。 ul{ width:60%; ...
css 如何让文字标题显示在边框上
神zhi殇的博客
12-26 4232
方法一、 &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 1384
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...
html怎么在ul添加线条,html中li标签中这条边线怎么添加的
weixin_36399495的博客
06-03 4281
满意答案nyhskwzm2016.06.07采纳率：58%等级：8已帮助：3115人1、打开编辑测试的软件，设置一个div区域，li标签因为默认的需要换行，所以需要设置一个浮动点，float:left;使其靠左浮动对齐；主要代码如下：.ceshi{width:100%;height:30px;background-color:#F00;color:#FFF;}.ceshi ul{ widt...
浮动的ul背景及图片的边框
weixin_30799995的博客
04-12 163
今天遇到的问题整理： 1.ul中的li浮动时，无论给外层div的class写背景，还是给ul写背景，都是没有效果的。这是因为li浮动时撑不起外层的高度。给li或者a加上display:block;也没有用。解决方法是给外层div加上clearfix。 .clearfix:after/*跟随其后的内容*/ { content:"."; display:block; height:0; clear...
使用CSS把ul,li制作成表格
u011927449的博客
07-06 1306
查看效果：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" /
深入解析CSS中ul与li元素的样式设计
资源摘要信息:"CSS中的ul与li样式详解共5页.pdf.zip" 根据提供的文件信息，该文件主要涉及的内容是关于CSS（层叠样式表）中ul与li元素的样式设置和相关技术。为了满足字数要求，以下是对这个主题的详细解释和知识点...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值