默认边框覆盖问题

我有这个CSS在我的网页默认边框覆盖问题

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

后该CSS边框显示在这种方式。

enter image description here

但在我的情况下，我想是这样的（底线覆盖黑一）

enter image description here

我怎样才能做到这一点没有改变我的HTML（因为它会自动生成）。

编辑：

还要注意，我的UL标签是多，所以一切都不在同一行，我不能有给人下边框我UL标签的解决方法。

我在我的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>

来源

2013-06-19 Gab

你的问题不明确对我来说，你找的是右边界重叠的底部边框？像第二个图像？ –

试试这个

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 Code

来源

2013-06-19 12:30:23

在我的情况下，我不能这样做，因为我的ul有三行不只一行。 –

我想要每行下面的底线。 –

你能告诉我你的ul代码吗？ –

I H大家试了一下。我解决了这个问题。你试试这个。

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

来源

2013-06-19 13:00:20 sarfaraj

我的问题是关于mulitline ul的 –

我已更新您的jsfiddle以匹配我的http://jsfiddle.net/3Qug5/3/。在我的情况下，这种解决方案不起作用。 –

很好的解决方案+1 –

默认边框覆盖问题

回答

相关问题