集中橫向菜單

HTML集中橫向菜單

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
     <title>hangout</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 
    <body> 
     <div id="site"> 
      <!-- header --> 
      <div id="header"> 
       <div id="menu" align="center"> 
        <ul> 
         <li><a href="index.html"  class="btnHome active">  <img src="images/btn/spacer.gif" alt="" width="120" height="36"></a></li> 
         <li><a href="portfolio.html" class="btnPort">   <img src="images/btn/spacer.gif" alt="" width="120" height="36"></a></li> 
         <li><a href="#.html"   class="btnVideos">   <img src="images/btn/spacer.gif" alt="" width="120" height="36"></a></li> 
         <li><a href="#.html"   class="btnNews">   <img src="images/btn/spacer.gif" alt="" width="120" height="36"></a></li> 
         <li><a href="#.html"   class="btnGallery">   <img src="images/btn/spacer.gif" alt="" width="120" height="36"></a></li> 
         <li><a href="#.html"   class=" btncontacts">  <img src="images/btn/spacer.gif" alt="" width="120" height="36"></a></li> 
         <li><a href="#.html"   class=" btnAbout">   <img src="images/btn/spacer.gif" alt="" width="120" height="36"></a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

CSS

* { 
margin : 0; 
padding : 0; 
text-align : center; 
} 
html { 
width : 100%; 
height : 100%; 
background-color : #222222; 
} 
body { 
width : 100%; 
height : 100%; 
background: url('images/hdr-bg.gif') top left repeat-x; 
} 
#site { 
width : 988px; 
margin : 0 auto; 
} 
#header { 
padding : 15px 0 15px 0; 
width : 988px; 
overflow : hidden; 
position : relative; 
} 

#menu { 
width : 988px; 
height : 36px; 
margin : 0; 
padding : 0px 0 0 14px; 
} 
#menu ul { 
overflow : hidden; 
padding : 0 3px 0 0; 
} 
#menu li { 
display : inline; 
list-style-type : none; 
} 
#menu a { 
display : block; 
float : left; 
} 

.btnHome{background:url('images/btn/Home.png') top left no-repeat;} 
.btnPort{background:url('images/btn/Port.png') top left no-repeat;} 
.btnVideos{background:url('images/btn/Videos.png') top left no-repeat;} 
.btnNews{background:url('images/btn/News.png') top left no-repeat;} 
.btnContact{background:url('images/btn/mid.png') top left no-repeat;} 
.btnGallery{background:url('images/btn/Gallery.png') top left no-repeat;} 
.btncontacts{background:url('images/btn/contacts.png') top left no-repeat;} 
.btnAbout{background:url('images/btn/About.png') top left no-repeat;} 
#menu a:hover, .active { 
background-position : bottom left; 
}

您好，我有2個問題與menu.first被集中菜單。我不能拿出左邊的浮球，然後我的菜單不會水平。第二件事是btn圖片好像他們不堅持在IE瀏覽器。和順便說一句，每個BTN的長度***。PNG是120像素
會感謝你的幫助

來源

2012-09-08 Ali

很容易做到display: inline-block;。

ul {text-align: center; font-size: 0;} 
li {display: inline-block; vertical-align: top; *zoom: 1; *display: block; font-size: 12px;}

來源

2012-09-08 19:19:50

是的問題是，即使不工作以及！我不想把它們之間的空間，我想讓他們堅持對方！ =/ – Ali

已更新的答案。 –

集中橫向菜單

回答

相關問題