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

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

查看输出

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

Answer 2

尝试这个

css

ul:before{
    border-bottom:solid 5px yellow; 
    content:"";
    width:100%;
    height:50px;
    display:block;
    position:absolute;
}
ul li{
    float:left;
    list-style-type:none;
    border-right:solid 5px green;
    height:100px;
}

jsFiddle 代码