css列表问题_html/css
来源：动视网
责编：小采
时间：2020-11-27 15:57:29
css列表问题_html/css
css列表问题_html/css_WEB-ITnose: 无需表格的菜单 ul{ width:200px; color:white; list-style-type:none; font-family:Arial; margin:0px; padding:0px; } li{ background-color: #c11136; padding:5p
导读css列表问题_html/css_WEB-ITnose: 无需表格的菜单 ul{ width:200px; color:white; list-style-type:none; font-family:Arial; margin:0px; padding:0px; } li{ background-color: #c11136; padding:5p
<br /> 无需表格的菜单 <br /> Home My Blog Friends Next Station Contact Me 怎么让运行结果如此图
回复讨论(解决方案)
已经是这样的效果了
学习，接分。。
不是 你仔细看 每个
的下边框长度不一样
不是 你仔细看 每个
的下边框长度不一样
还真没发现你说的问题
不是 你仔细看 每个
的下边框长度不一样
还真没发现你说的问题
这段代码结果是： 而我想让结果是： 就那几个下面的边框线长度不一样
浏览器问题，把border-bottom-width的值设大点效果更明显
浏览器问题，把border-bottom-width的值设大点效果更明显
那个我设置过 但太粗了 我想要的不是那个效果 我还有套代码 能实现我说的那个效果
无需表格的菜单
Home My Blog Friends Next Station Contact Me 但我不知道之前发的那套为啥达不到此效果
每个元素想一个盒子模型，你可以搜索一下。四边的border其实是有交叉的，所以每个border是一个梯形而不是长方形。这是导致你的第一个样式想过的原因，通过楼上的那个把border-bottom加大的例子就看得很清楚。网上有通过这种特性来制作纯css的三角形的例子。
你的第二个样式，是通过设置外层li的border-bottom来避免内层a的padding给border带来的影响。
另外可以试试通过设置ul的背景和li的margin实现border的效果。点击查看 在线演示
但我不知道之前发的那套为啥达不到此效果
css列表问题_html/css
css列表问题_html/css_WEB-ITnose: 无需表格的菜单 ul{ width:200px; color:white; list-style-type:none; font-family:Arial; margin:0px; padding:0px; } li{ background-color: #c11136; padding:5p
