0

我有两个div。一个是一组应该显示为内联但应该展开的标题。另一个，主要内容 div，对于下面的每个标题都有一组 div。我在 main-content div 周围设置了一个边框，但浏览器在两个 div 的顶部呈现了这个边框。如何修复边框，使其仅出现在主要内容 div 上，为什么会发生这种情况？ 在此处输入图像描述

普朗克

编码：

<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>

更新

  1. 当我把它工作display:inline-block;，但它是这样做的正确方法吗？
  2. 如何在周围设置边框#headers？
4

2 回答 2

0

使用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-02T10:51:06.407 回答
0

您需要按如下方式设置overflow:auto（或overflow: hidden） ：#headers

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

该overflow: auto属性导致#headers建立块格式化上下文，这意味着所有浮动都将包含在父块中，并且不会受到父块之前或之后的任何内容的影响。

然后，您的边框属性将按预期工作。

于 2013-10-02T10:53:08.813 回答