1

我在一个div中做了一个跨度。这个跨度只是一个黑色边框，位于 div 上方。我希望这个跨度（黑色边框）适应 div 的宽度和高度。就像这个 div 内部的边框一样。

我的问题是边框超出了 div：http: //jsfiddle.net/QHRYJ/

div {
    background: pink; 
    width: 300px; 
    height: 200px;
}

span {
    position: absolute;
    width: inherit; 
    border: 4px solid;
    margin: 10px;
    height: inherit;
}

-->-->-->--> *编辑：我想要什么： http: //www.hostingpics.net/viewer.php?id=623039div.png *

4

2 回答 2

3

但是，如果您仍然想以自己的方式实现它，这些评论不言自明：

div {
    position: relative;
    background: pink; 
    width: 300px; 
    height: 200px;
}

span {
    position: absolute;
    top:0 ;
    left: 0;
    right: 0;
    bottom: 0;
    border: 4px solid;
}

你需要给你的父 div 一个位置，以便它的子元素在它的父元素上定位自己。然后，由于您的跨度是绝对定位的，您可以通过显式设置 left、right、bottom 和 top 来扩展它0。

如果您想在 span 和 div 之间有间距，请在 span 中添加边距。

于 2013-10-30T12:49:18.080 回答
1

我认为您在这里遇到了XY 问题。根据您在评论中描述的内容（<div>在悬停时添加边框），您不需要一个<span>元素。:hover您可以使用伪选择器来实现这一点。例如：

div:hover {
    border: 4px solid #000
}

这是一个jsFiddle Demo

您可能希望在 上指定box-sizing以<div>防止其调整大小：

-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
于 2013-10-30T12:49:59.823 回答