Question

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个问题。首先是集中菜单。我不能拿出左边的浮子然后我的菜单不会是水平的。而第二件事是btn pics似乎他们在IE中不相互坚持。顺便说一句，每个btn ***。png的长度是120px
非常感谢你的帮助

Answer 1

使用display: inline-block;非常容易。

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

集中水平菜单

1 个答案: