如何修復CSS中的邊框，使其僅出現在當前div上？

我有兩個div。一種是應該以內聯方式顯示的一組標題，但應該分散顯示。另一個，main-content div，下面的每個標題都有一組div。我在主內容div上放置了一個邊框，但瀏覽器將這個邊框渲染到了兩個div的頂部。如何修復邊框，使其僅出現在主內容div上，爲什麼會發生這種情況？ enter image description here 如何修復CSS中的邊框，使其僅出現在當前div上？

Plunker

代碼：

<html> 
<head> 
    <style type="text/css"> 
#main { 
    width: 80%; 
    height: 80%; 
} 
#headers { 
    width: 100%; 
    display: block; 
} 
#main-content { 
    border: 1px solid #f00; 
} 
.header{ 
    text-align: center; 
    float: left; 
    display: inline; 
    width: 14%; 
} 
    </style> 
</head> 
<body> 
<div id="main"> 
    <div id="headers"> 
     <div class="header"> 
      Header1 
     </div> 
     <div class="header"> 
      Header2 
     </div> 
     <div class="header"> 
      Header3 
     </div> 
     <div class="header"> 
      Header4 
     </div> 
     <div class="header"> 
      Header5 
     </div> 
     <div class="header"> 
      Header6 
     </div> 
     <div class="header"> 
      Header7 
     </div> 
    </div> 
    <div id="main-content"> 
     main content 
    </div> 
</div> 
</body> 
</html>

更新

它的工作原理，當我把display:inline-block;，但它是這樣做的正確方法是什麼？
如何在#headers周圍放置邊框？

來源

2013-10-02 user3111525

[見此]（http://plnkr.co/edit/riest0?p=preview）你可以給主要內容div使用'float：right;'並使用'display：inline-block'是很好的去。 :) –

@DKM inline-block很好。圍繞#headers的邊框怎麼樣？ – user3111525

使用display:inline-block修復了這個問題。

#headers 
    width:100% 
    border:1px solid blue 
    display:inline-block 

.header 
    text-align:center 
    float:left 
    display:inline-block 
    width:14%

來源

2013-10-02 10:51:06 user3111525

在這種情況下，您還可以在'＃headers'上使用'display：block'，因爲inline-block子元素將被完全包含在他們的父塊中（與使用'float：left'相反）。 –

您需要關於#headers設置overflow:auto（或overflow: hidden）如下：

#headers { 
    width: 100%; 
    display: block; 
    overflow: auto; 
    border: 1px solid #f00; 
}

的overflow: auto屬性導致#headers建立塊格式化內容，這意味着所有的浮體將被封閉在父塊內，並且不會受到父塊之前或之後的任何內容的影響。

您的邊界屬性將按預期工作。

來源

2013-10-02 10:53:08

如何修復CSS中的邊框，使其僅出現在當前div上？

回答

相關問題