Question

第一个问题是我的横幅和导航栏之间存在差距，即使我没有任何分隔它们

我的下一个问题是我的导航栏应该延伸到页面的末尾（或者在我的情况下为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>

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

出现css div标签格式错误

1 个答案: