1

第一个问题是我的横幅和导航栏之间存在间隙，即使我没有任何东西将它们分开

我遇到的下一个问题是我的导航栏应该延伸为蓝色直到页面末尾（或在我的情况下为 970px），但每个 li 元素只有蓝色

第三， div 标签似乎没有做好他们的工作，因为当我展开我的页面时，我得到下一个 div 标签向上移动到这个标签的右侧。

我的 CSS 代码

#button {
    padding: 3px;
}
#button li {
    display: inline;

}
#button li a {
    font-family: Arial;
    font-size:14px;
    text-decoration: none;
    float:left;
    padding: 10px;
    background-color: #4169E1;
    color: #fff;
    }
#button li a:hover {
    background-color: #E30800;
    margin-top:-2px;
    padding-bottom:12px;
}

这是我的html

<body leftmargin="50px" rightmargin="50px">
<img src="banner.jpg" width="970" height="120" />

<div>
  <ul id="button">
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact </a></li>
    <li><a href="#">Resum&eacute;</a></li>
    <li><a href="#">Help</a></li>
  </ul>
</div>

<div>
<table width="970" cellpadding="5px">
<tr height="270">
  <td width="700"><div class="slider-wrapper theme-default">
      <div id="slider" class="nivoSlider"> <img src="demo/images/nemo.jpg" alt="" /> <a href="http://dev7studios.com"><img src="demo/images/up.jpg" alt="" title="#htmlcaption" /></a> <img src="demo/images/toystory.jpg" alt="" title="This is an example of a caption" /> <img src="demo/images/walle.jpg" alt="" /> </div>
    </div>
    <div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div></td>
  <td width = "270"><img src="demo/images/nahum-pachenik.jpg"></td>
</tr>
<table>
</div>
<hr color="#4169E1"/>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>
</body>
4

1 回答 1

1

jsFiddle：http: //jsfiddle.net/Hjc2e/

    html,ul{
    /*clear any default margin or padding, research css reset*/
    /*this is how you get the <ul> to line up flush with your image*/
    margin:0;
    padding:0;
}
body{
    /*width 100% for content and you can control you width with the left and right margins of body*/
    margin-left:50px;
    margin-right:50px;
}
#button li {
     background-color: #4169E1;
    float:left;
    list-style-type:none;
    text-align:center;  
    /*Must calculate width of menu based on width of list items in menu, 4 items thus 25%*/
     width:25%;
    height:40px;
/* so that text lines up vertically center padding-top is always half the height*/
    padding-top:20px;
}
#button li a {
    font-family: Arial;
    font-size:14px;
    text-decoration: none;
    color: #fff;
    }
#button li a:hover {
    background-color: #E30800;
    margin-top:-2px;
    padding-bottom:5px;
}


<!--no need for div wrapper and it was adding gap between banner image and menu-->
  <ul id="button">
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact </a></li>
    <li><a href="#">Resum&eacute;</a></li>
    <li><a href="#">Help</a></li>
  </ul>


<div>
<table width="970" cellpadding="5px">
<tr height="270">
  <td width="700"><div class="slider-wrapper theme-default">
      <div id="slider" class="nivoSlider"> <img src="demo/images/nemo.jpg" alt="" /> <a href="http://dev7studios.com"><img src="demo/images/up.jpg" alt="" title="#htmlcaption" /></a> <img src="demo/images/toystory.jpg" alt="" title="This is an example of a caption" /> <img src="demo/images/walle.jpg" alt="" /> </div>
    </div>
    <div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div></td>
  <td width = "270"><img src="demo/images/nahum-pachenik.jpg"></td>
</tr>
<table>
</div>
<hr color="#4169E1"/>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>
</body>
于 2013-07-16T23:54:26.087 回答