如何给此CSS设置内部边框? [英] How can I give this CSS an inner border?

问题描述

我正在尝试为#page div提供一个内部边框，该边框与顶部周围的灰色边框一致: http://www.designated.net.au/testbed/testpage/

I am trying to give the #page div an inner border that is in line with the grey border around the top part: http://www.designated.net.au/testbed/testpage/

我意识到我可以添加另一个div，但这不是我正在寻找的解决方案，因为#page中还会有其他内容.这可能吗?

I realise I could just add another div, but that is not the solution I'm looking for as there will be other content within #page. Is this possible?

这是从以下问题开始的:边框CSS无法正常工作

This follows on from this question: Border-box CSS not working properly

推荐答案

您可以利用已经用于将图像与边框对齐的相对位置.

You can leverage the relative positioning you are already using to align your images with the border.

示例: http://jsfiddle.net/zbrcb/

将这些定义与您现有的定义合并.

#page {
 border: 10px solid #333;  
}

#spotlight-main-top-left { z-index:3; position:relative; float:left; width:40px; height:40px; left: -10px; top: -10px; }
#spotlight-main-top-top { z-index:2; position:relative; width:100%; height:10px; background-color:#333333; top: -10px; }
#spotlight-main-top-right { z-index:3; position:relative; float:right; width:40px; height:40px; right: -10px; top: -10px; }
#spotlight-main-top-title { z-index:3; position:relative; margin:0 auto; width:200px; height:30px; top: -10px;  }
#spotlight-main-top-title-left { position:relative; float:left; width:30px; height:30px; }
#spotlight-main-top-title-right { position:relative; float:right; width:30px; height:30px; }
#spotlight-main-top-title-middle { position:relative; margin:0 30px 10px; width:140px; height:20px; background-color:#333333; }
#spotlight-main-top-title-text { position:relative; width:140px; height:18px; text-align:center; }

可在Chrome，FF，Safari，IE 8/9中运行(可能也可以使7工作;即使没有此更改，您的标头在IE7中也未对齐).

​Works in Chrome, FF, Safari, IE 8/9 (7 could probably be made to work as well; your header is misaligned in IE7 even without this change).

就个人而言，我会尝试减少用于创建网站顶部的元素的数量，但公平地说，它可以正常工作.

Personally, I would try to reduce the number of elements you are using to create the top of the site, but to be fair it works fine.

这篇关于如何给此CSS设置内部边框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！