0

这是我第一次使用这个网站，我一直在尝试做一些翻转导航。所有图像都会产生悬停效果，但它们彼此堆叠而不是彼此相邻。如何让它们水平布局而不是垂直布局？

我的代码如下。

CSS：

html, body{margin: 0; padding: 0; background-color: #c0c0c0;}
p{width:900px; position: relative; left: 30px;}
h2{width:900px; position: relative; left: 30px;}
.container{width:960px; margin: auto;}  

.header{height: 124px;}                     
.navigation{height: 59px; width: 960px;}

.navigation1{
        display: block;
    width: 136px;
    height: 59px;
        background-image: url('http://fakehost:8888/TheWorksPlumbing/images/navigationImages/nav_01.jpg');
    background-position:0px -59px;
        text-indent: -99999px;
}
.navigation1:hover{background-position:0px 0px;}

.navigation2{
        display: block;
        width: 138px;
    height: 59px;
        background-image: url('http://fakehost:8888/TheWorksPlumbing/images/navigationImages/nav_02.jpg');
    background-position:0px -59px;
        text-indent: -99999px;
}
.navigation2:hover{background-position: 0 0;}

.navigation3{
        display: block;
        width: 170px;
    height: 59px;
        background-image: url('http://fakehost:8888/TheWorksPlumbing/images/navigationImages/nav_03.jpg');
    background-position:0px -59px;
        text-indent: -99999px;
}
.navigation3:hover{background-position: 0 0;}

.navigation4{
        display: block;
        width: 138px;
    height: 59px;
        background-image: url('http://fakehost:8888/TheWorksPlumbing/images/navigationImages/nav_04.jpg');
    background-position:0px -59px;
        text-indent: -99999px;
}
.navigation4:hover{background-position: 0 0;}

.navigation5{
        display: block;
        width: 168px;
    height: 59px;
        background-image: url('http://fakehost:8888/TheWorksPlumbing/images/navigationImages/nav_05.jpg');
    background-position:0px -59px;
        text-indent: -99999px;
}
.navigation5:hover{background-position: 0 0;}

.navigation6{       
        display: block;
        width: 210px;
    height: 59px;
        background-image: url('http://fakehost:8888/TheWorksPlumbing/images/navigationImages/nav_06.jpg');
    background-position:0px -59px;
        text-indent: -99999px;
}
.navigation6:hover{background-position: 0 0;}

.mainAd{height: 271px;}                     
.mainbody{background-color: white;}
.map{position: relative; left: 30px;}
.footer{height: 197px;}

HTML：

        <div class="container">
            <div class="header"><img src="http://localhost:8888/TheWorksPlumbing/images/Layout_01.jpg"></div>
             <div class="navigation" >
                 <div class="navigation1"><a href="home">Home</a></div>
                 <div class="navigation2"><a href="about">About</a></div>
                 <div class="navigation3"><a href="services">Services</a></div>
                 <div class="navigation4"><a href="rates">Rates</a></div>
                 <div class="navigation5"><a href="specials">Specials</a></div>
                 <div class="navigation6"><a href="contact">Contact</a></div>
             </div>
</div>
4

2 回答 2

1 
float: left;

在每个导航元素上都会使它们水平。

尽管我认为您的代码过于复杂。也许尝试使用一个列表并将您的常见样式浓缩在

ul.navigation li {
     float: left
     .....
}

此外，您可能需要向父元素添加溢出：隐藏，以便它环绕导航的浮动列表项。

ul.navigation {
    width: 960px;
    overflow: hidden;
}
于 2013-03-18T00:22:32.490 回答
0

添加这个CSS：

.navigation div {
    float: left;
}
于 2013-03-18T00:22:43.137 回答