CSS連接菜單DIV背景

我目前編碼這個模板：http://i.imgur.com/ydrsj.png CSS連接菜單DIV背景

我希望它看起來像這樣，但每當我做到這一點，這是發生了什麼：http://gyazo.com/a87d0c8f763ec1875d74f238ed8ff575

我做錯了什麼？

我的HTML：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<title>SlyFiles</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta name="description" content="SlyFiles upload" /> 
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/> 
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen"/> 
<link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'><link rel="stylesheet" href="css/flexslider.css" type="text/css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script src="js/jquery.flexslider.js"></script><!-- Place in the <head>, after the three links --><script type="text/javascript" charset="utf-8">$(window).load(function() { $('.flexslider').flexslider({ animation: "slide" });});</script> 
<link rel="stylesheet" href="flexslider.css" type="text/css"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
<script src="js/jquery.flexslider.js"></script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="js/jquery.lavalamp-1.4.js"></script> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<script type="text/javascript"> 
// Can also be used with $(document).ready() 
$(window).load(function() { 
    $('.flexslider').flexslider({ 
    animation: "slide" 
    }); 
}); 
</script> 
</head> 
<header> 
<div class="header"> 
<div class="container"> 
<div class="menu"> 
    <ul> 
    <li class="current"><img src="img/home.png"/><span style="vertical-align: middle; margin-left: 5px;">Home</span></li> 
    <li><img src="img/twitter.png"/><span style="pical-align: middle; margin-left: 5px;">Twitter</span></li> 
    <li><img src="img/fb.png"/><span style="vertical-align: middle; margin-left: 5px;">Facebook</span></li> 
    <li><img src="img/contact.png"/><span style="vertical-align: middle; margin-left: 5px;">Contact</li> 
    </ul> 
    </div> 
</div> 
</div> 
<div id="borderbottom"></div> 
</header> 
<body> 
</body> 
</html>

我的CSS：

.header { 
height: 42px; 
width: 100%; 
background: #1d1d1d; 
} 

#borderbottom { 
width: 100%; 
height: 12px; 
background-image: url("../img/border.png"); 
background-repeat: repeat-x; 
} 

.menu { 
margin-top: -15px; 
} 
.menu li { 
display: inline; 
margin: 10px; 
float: left; 
color: #fff; 
} 

.current { 
background-image: url("../img/current.png"); 
width: 84px; 
height: 54px; 
} 

.flex-container a:active, 
.flexslider a:active, 
.flex-container a:focus, 
.flexslider a:focus {outline: none;} 
.slides, 
.flex-control-nav, 
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles 
*********************************/ 
.flexslider {margin: 0; padding: 0;} 
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */ 
.flexslider .slides img {width: 100%; display: block;} 
.flex-pauseplay span {text-transform: capitalize;} 

/* Clearfix for the .slides element */ 
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;} 

/* No JavaScript Fallback */ 
/* If you are not using another script, such as Modernizr, make sure you 
* include js that eliminates this class on page load */ 
.no-js .slides > li:first-child {display: block;} 


/* FlexSlider Default Theme 
*********************************/ 
.flexslider {margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;} 
.flex-viewport {max-height: 258px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;} 
.loading .flex-viewport {max-height: 300px;} 
.flexslider .slides {zoom: 1;} 

.carousel li {margin-right: 5px} 


/* Direction Nav */ 
.flex-direction-nav {*height: 0;} 
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;} 
.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; } 
.flex-direction-nav .flex-prev {left: -36px;} 
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;} 
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;} 
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;} 
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;} 

/* Control Nav */ 
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;} 
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;} 
.flex-control-paging li a { 
width: 11px; 
height: 11px; 
display: block; 
background: #fff; 
cursor: pointer; 
text-indent: -9999px; 
-webkit-border-radius: 20px; 
-moz-border-radius: 20px; 
-o-border-radius: 20px; 
border-radius: 20px; 
box-shadow: inset 0 0 3px rgba(0,0,0,0.3); 
} 

.flex-control-paging li a:hover { 
background: #009ec3; /* Old browsers */ 
background: -moz-linear-gradient(top, #009ec3 0%, #00aad9 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#009ec3), color-stop(100%,#00aad9)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #009ec3 0%,#00aad9 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #009ec3 0%,#00aad9 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #009ec3 0%,#00aad9 100%); /* IE10+ */ 
background: linear-gradient(to bottom, #009ec3 0%,#00aad9 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009ec3', endColorstr='#00aad9',GradientType=0); /* IE6-9 */ 

} 
.flex-control-paging li a.flex-active { 
background: #009ec3; /* Old browsers */ 
background: -moz-linear-gradient(top, #009ec3 0%, #00aad9 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#009ec3), color-stop(100%,#00aad9)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #009ec3 0%,#00aad9 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #009ec3 0%,#00aad9 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #009ec3 0%,#00aad9 100%); /* IE10+ */ 
background: linear-gradient(to bottom, #009ec3 0%,#00aad9 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009ec3', endColorstr='#00aad9',GradientType=0); /* IE6-9 */ 

cursor: default; 
} 

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;} 
.flex-control-thumbs li {width: 25%; float: left; margin: 0;} 
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;} 
.flex-control-thumbs img:hover {opacity: 1;} 
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;} 

@media screen and (max-width: 860px) { 
    .flex-direction-nav .flex-prev {opacity: 1; left: 0;} 
    .flex-direction-nav .flex-next {opacity: 1; right: 0;} 
}

來源

2012-09-25 Jony

第35行：您還沒有指定一個</span>標籤。

（在此行上：<li><img src="img/contact.png"/><span style="vertical-align: middle; margin-left: 5px;">Contact</li>）。

來源

2012-09-25 20:25:57 Qiang

謝謝解決。 ^^ – Jony

CSS連接菜單DIV背景

回答

相關問題