-1

我正在尝试制作网页，但遇到了一个奇怪的问题。这是我的 HTML：

HTML

<div id="header">
  <div>
    <h2>Home</h2>
  </div>
  <div>
    <h2>Events</h2>
  </div>
  <div>
    <h2>Projects</h2>
  </div>
  <div>
    <h2>About</h2>
  </div>
  <div>
    <h2>Contact Us</h2>
  </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet faucibus velit, eu semper erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus scelerisque lobortis justo ac bibendum. Vivamus vulputate tristique tellus vitae posuere. Nulla imperdiet orci et sem tincidunt ornare. Donec ac justo dui. Cras tempor convallis enim fermentum mattis. Vestibulum vel neque ultricies, molestie diam id, fringilla libero.
</p>
<p>Nam porttitor mi et lacus viverra tempor. Maecenas egestas, ante ut lacinia tincidunt, tellus est suscipit ante, suscipit consectetur eros mauris et nunc. Integer nec hendrerit mauris. Suspendisse potenti. Fusce et aliquet ligula, eu tempus orci. Curabitur vitae dignissim erat. Fusce laoreet gravida urna, in volutpat ante facilisis sed. Donec lobortis justo a risus condimentum, non mollis libero posuere. Sed lacinia enim porta, commodo velit a, tristique sapien.
</p>
<p>Aenean consequat dolor quis placerat luctus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed gravida metus vitae viverra semper. Cras laoreet pretium sem, eu placerat justo. Duis feugiat volutpat adipiscing. Curabitur ullamcorper suscipit varius. Sed a pulvinar nisi. Nullam aliquam orci a tincidunt convallis.
</p>

CSS

body {
    font:16px/28px verdana;
    font-family: 'Title',"Lucida Sans","Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;
}
/*#header{
    width:100%;
}*/
#header div{

    float:left;
    width: 20%;     /*this has to be changed with the number of elements in header 100/n*/
    border-bottom: 1px solid rgba(22,22,22,0.3);
/*  border-bottom: 1px solid rgba(22,22,22,0.5);*/

}
#header div h2{
    text-align: center;
    /*border-right: 1px solid rgba(22,22,22,0.3);*/
}
#header div:hover{
    background-color:rgba(0,200,80,1);
    -moz-transition: background-color,0.6s;
    -webkit-transition: background-color,0.6s;
    -o-transition: background-color,0.6s;
}
body p:first-child{
    clear:none;
}
/*{
    box-shadow: 10px 5px 5px black;
}*/

现在，问题是正文中的第一个 p 与 重叠#header。为什么会这样？#header没有绝对定位。

4

2 回答 2

1

#header没有高度，因为它所有的孩子都是浮动的，这就是你看到“重叠”的原因：http: //jsfiddle.net/qsgq7/3/

切换到 usinginline-block或应用clearfix到#header. 示例：

#header:after {
    content:"";
    display: table;
    clear: both;
}
于 2013-09-23T15:57:45.637 回答
0

这只是一个建议，当然如果您使用的是 HTML5，否则您必须将<header>&更改<nav>为 div。

这是一个小提琴

<header>

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>

  <span class="clearfix"></span>  

</header>

header {
  width:100%;
  margin-bottom: 20px;
}
nav ul li {
  float:left;
  list-style: none;
  text-align: center;
  width: 20%;
  border-bottom: 1px solid rgba(22,22,22,0.3);
}
nav ul li a {
  display: inherit;
  padding: 15px 0 15px 0;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
}
nav ul li a:hover{
  color: #ccc;
  background:rgba(0,200,80,1);
  transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  -webkit-transition: all 0.4s linear;
  -o-transition: all 0.4s linear;
}
.clearfix {
  display: block;
  clear: both;
}
于 2013-09-23T17:06:41.143 回答