我的页面中有这个 css
li
{
border-right:8px solid #101212;
border-bottom:8px solid #33B5E5;
}
默认情况下边框以这种方式显示。
但在我的情况下,我想要这样的东西(底线覆盖黑色)
如何在不更改 html 的情况下实现此目的(因为它是自动生成的)。
编辑:
另请注意,我的 ul 标签是多行的,因此所有内容都不在一行中,并且我无法通过为我的 ul 标签提供 border-bottom 来解决此问题。
我的 CSS 中有这个。
ul
{
width:270px;
}
li
{
float: left;
width:90px;
}
在我的 html 中
<ul>
<li><a href="listview/index.html"><div class="menu_item_img"></div>Editing </a></li>
<li><a href="listview/detailbuttons.html"><div class="menu_item_img"></div>Editing </a></li>
<li><a href="listview/databinding.html"><div class="menu_item_img"></div>Editing</a></li>
<li><a href="listview/pull-to-refresh.html"><div class="menu_item_img"></div>Editing</a></li>
<li><a href="listview/endless-scrolling.html"><div class="menu_item_img"></div>Editing</a></li>
<li><a href="listview/pull-with-endless.html"><div class="menu_item_img"></div>Editing</a></li>
<li><a href="listview/press-to-load-more.html"><div class="menu_item_img"></div>Editing</a></li>
<li><a href="listview/fixedheaders.html"><div class="menu_item_img"></div>Editing</a></li>
<li><a href="listview/templates.html"><div class="menu_item_img"></div>Editing</a></li>
</ul>
最佳答案
我试过了。我解决了这个问题。 你试试这个。
ul{
border-bottom:solid 5px #33B5E5;
height:50px;
margin:0;
padding:0;
}
ul li{
float:left;
list-style-type:none;
border-right:solid 5px #101212;
height:100px;
padding:0 10px;
line-height:50px;
z-index:-1;
position:relative;
}
关于html - Css 边框覆盖问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17190897/