第一个问题是我的横幅和导航栏之间有间隙,即使我没有任何东西将它们分开
我遇到的下一个问题是我的导航栏应该将蓝色扩展到页面末尾(在我的例子中是 970 像素),但它只为每个 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é</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>
最佳答案
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é</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标 checkout 现格式化错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17688606/