首页 文章

当它在一个带有1px边框的UL“表格”（用-1px左上边距和左边距制作）时，如何制作一个带有2px四边边框的LI

提问于
浏览 次
1

这是我的问题：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 top and left margins 表示1px灰色边框折叠 . 我试图为其中一个细胞制作2px蓝色边框 . 放大时，第5个列表项上有 blue 2px top and left borders ，但它是 overridden by grey 1px border of neighbour items on right and bottom .

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

css border margin

2 回答

  • 0

    你需要的是将它放在邻居之上 .

    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更新了工作方式;我不喜欢内联样式:-)

    回复于
  • 0

    但是在IE <9中不支持使用带有css的：nth-child（），你可以通过javascript执行此操作，如下所示：demo：

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

相关问题