如何设置内部和外部元素的边框以防止双边框 [英] how to set border for inner and outer element to prevent double border in besides

问题描述

我知道我们可以使用 inset 和 ouset 边框到表格的样式边框。

i know we can use inset and ouset border to styling border for a table.

table{border: 1px inset #fff;}
td{border: 1px outset #fff;}

当我们使用表时一切正常，因为每个事情都在 td ，并且您从不直接在表标签中放置元素或文本。

everything is OK when we are using table because every thing is in a td and you never put an element or text in the table tag directly.

现在的问题是，当我们使用 div s做同样的样式有很多问题。

now the question is that when we are using divs to do the same styling there are many problems.

1. 如果我们在外部div中放置文本或元素，则在右侧看不到任何边框。


2. 第一个内部 div 没有顶部边框。

1. if we put a text or element in outer div we don't see any border in right side of it.
2. first inner div hast not border in top.

这里是使问题更具体的问题。

http://jsfiddle.net/v4D9q/

here is the fiddle to make the problem more specific.
http://jsfiddle.net/v4D9q/

推荐答案

你必须使用插入/开始吗？

Do you have to use inset/outset?

这是几行更多css，但为什么不放在外部的顶部/左/右边框，并且只设置边框底部的内部元素。

It's a few lines more css, but why not just put a border on the top/left/right of the outer, and only set border bottom on the inner elements.

HTML：

<div class="outer">
    outer div (we dont see border in right side)
    <div class="inner">inner div</div>
    <div class="inner">inner div</div>
</div>

CSS：

.outer{
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-top: 1px solid #000;                
}
.inner{
    border-bottom: 1px solid #000; 
}

http://jsfiddle.net/PFhfF/

这篇关于如何设置内部和外部元素的边框以防止双边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！