html - Css 边框覆盖问题

Question

我的页面中有这个 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">&#xe0dc;</div>Editing </a></li>
            <li><a href="listview/detailbuttons.html"><div class="menu_item_img">&#xe0db;</div>Editing </a></li>
            <li><a href="listview/databinding.html"><div class="menu_item_img">&#xe0da;</div>Editing</a></li>
            <li><a href="listview/pull-to-refresh.html"><div class="menu_item_img">&#xe0de;</div>Editing</a></li>
            <li><a href="listview/endless-scrolling.html"><div class="menu_item_img">&#xe0df;</div>Editing</a></li>
            <li><a href="listview/pull-with-endless.html"><div class="menu_item_img">&#xe0cc;</div>Editing</a></li>
            <li><a href="listview/press-to-load-more.html"><div class="menu_item_img">&#xe0cd;</div>Editing</a></li>
            <li><a href="listview/fixedheaders.html"><div class="menu_item_img">&#xe0ca;</div>Editing</a></li>
            <li><a href="listview/templates.html"><div class="menu_item_img">&#xe0c9;</div>Editing</a></li>
</ul>

Answer 1

我试过了。我解决了这个问题。你试试这个。

See the output

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;
}