CSS边框覆盖问题

Question

CSS边框覆盖问题

4

我在页面中有这样的CSS

li
{
    border-right:8px solid #101212;
    border-bottom:8px solid #33B5E5;
}

默认情况下，边框会以这种方式显示。

enter image description here

但在我的情况下，我想要像这样的效果（底部线条被黑色覆盖）

enter image description here

如何在不更改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>

- Gab

你的问题对我来说不太清楚，你是想让右边框重叠底部边框吗？就像第二张图片一样？ - Roy Sonasish

2个回答

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

- Roy Sonasish

在我的情况下，我不能这样做，因为我的ul有三行而不仅仅是一行。 - Chuck Norris

我想在每一行下面加上底线。 - Chuck Norris

我已经更新了我的答案，请检查一下是否符合您的要求。 - Roy Sonasish

我有类似这样的多行ul http://jsfiddle.net/3Qug5/3/。你能改变你的多行ul解决方案吗？ - Chuck Norris

请更新您的答案，这可能对其他人有所帮助。 - Gab

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sarfaraj · Accepted Answer

我尝试过了。我解决了这个问题。你也可以试试看。

查看输出结果

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