如何制作一个具有 2px 四边边框的 LI，当它位于具有 1px 边框的 UL“表格”中时（使用 -1px 顶部和左侧边距制作）答案

【问题标题】：How to make one LI with 2px four-side border, when it's in a UL "table" with 1px borders (made with -1px top and left margins)如何制作一个具有 2px 四边边框的 LI，当它位于具有 1px 边框的 UL“表格”中时（使用 -1px 顶部和左侧边距制作）
【发布时间】：2013-09-14 12:14:58
【问题描述】：

这是我的问题：http://jsfiddle.net/aWmku/

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li style="border: 2px solid blue;">5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>

CSS

ul {
    list-style: none;
   margin: 0;
    padding: 2px;
    display:block;
    clear:both;
    width:400px;
}

li {
    float: left;
    box-sizing: border-box;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    width: 129px;
    height: 120px;
    border: 1px solid grey;
    margin-left: -1px;
    margin-top: -1px;
    padding: 8px;
    position: relative;
}

有一个由无序列表项组成的表格，使用 -1px 顶部和左侧边距 来折叠 1px 灰色边框。我试图为其中一个单元格制作 2px 蓝色边框。放大时，第 5 个列表项有蓝色 2px 上下边框，但它被左右相邻项的灰色 1px 边框覆盖。

我想要实现的目标：在一个（单击/聚焦）单元格上创建 2px 蓝色边框，将其定位在与 this picture. 上完全相同的单元格上

【问题讨论】：

标签： css border margin

【解决方案1】：

您需要将其置于邻居之上。

li {
    float: left;
    box-sizing: border-box;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    width: 129px;
    height: 120px;
    border: 1px solid grey;
    margin-left: -1px;
    margin-top: -1px;
    padding: 8px;
    position: relative;
    z-index: 1;
}

li:nth-child(5) {
    border: 2px solid blue;
    z-index: 2;
}

demo

诀窍是设置元素的 z-index 大于邻居

（我已经通过 CSS 更新了样式；我不喜欢内联样式 :-)

【讨论】：

【解决方案2】：

但是在 IE demo:

$('ul li').eq(4).css("border","2px solid blue");

【讨论】：