-2

我正在寻求有关<div>问题的帮助。在标题部分，我有一个徽标、facebook（按钮）和我的菜单。facebook 按钮和徽标位于正确的位置，但是我无法将菜单放在正确的位置。我希望它位于右侧，坚持浏览器的右侧。

我希望有人愿意帮助我。

<div id="topContainer">
    <div id="centerContainer">
        <a href="index.html" class="logo fl"><img src="images/logoMAIN.png" alt="Grand Cafe de Reebok" /></a>

        <div id="social">
            <a href="https://www.facebook.com/GrandCafeDeReebok?fref=ts"><img src="images/Facebook.png" /></a>
        </div> <!-- End social -->          

        <div id="navigation">
            <ul class="nav">
                <li class="active"><a href="index.html"><span>de Reebok</span></a></li>
                <li><a href="menu.html"><span>Menu</span></a></li>
                <li><a href="reserveer.html"><span>Reserveer</span></a></li>
                <li><a href="openingstijden.html"><span>Openingstijden</span></a></li>
                <li><a href="arrangement.html"><span>Arrangement</span></a></li>
                <li><a href="fotos.html"><span>Foto's</span></a></li>
            </ul> 
        </div> <!-- End navigation -->
    </div> <!-- End centerContainer -->
</div> <!-- End topContainer -->

CSS 文件：

#centerContainer {
width: 100%;
height: 280px;
margin: 0 auto;}

.logo {
float: left; 
margin: 58px 36px 33px 85px;
display: block;
position: relative;
height: 200px;
width: 180px;}

#social {
float: right;
margin: 20px 30px 0 0;}

#navigation ul li {
text-decoration: none;
text-transform: uppercase;
display: inline;
font-family: Arial;
font-size: 16px; 
text-align: center;}

#navigation ul li a {
margin-right: 18px;
line-height: 60px;
margin-left: 3px;}

#navigation ul li a:hover {
color: #fff;}

#navigation ul li.active a {
color: #fff;}

#navigation {
float: right;
margin: 90px 0px 77px 0px;
background-color: rgba(0,0,0,0.41);
width: 680px; 
padding: 15px;
height: 70px;
position: absolute;
clear: both;}

#mainContainer {
background-image: url(../images/mainContainer-bg.png);
padding-top: 20px;
margin-top: 20px;
height: 462px;
-webkit-box-shadow: 0 12px 40px -6px black;
   -moz-box-shadow: 0 12px 40px -6px black;
        box-shadow: 0 12px 40px -6px black;
position: relative;
overflow: hidden;
width: 100%;}
4

2 回答 2

0

尝试以下样式：

 #navigation{
    position:fixed;
    right:0px;
    top:0px;
    height:100%;
    width:100px; /* According to your needs*/
 }

现在导航将始终停留在屏幕右侧

于 2013-09-19T10:45:57.160 回答
0

您的#navigation元素已经有float: right和position: absolute。因此，只需添加right: 0px就足够了。

#navigation {
    float: right;
    right: 0px; /*Added this line*/
    margin: 90px 0px 77px 0px;
    background-color: rgba(0, 0, 0, 0.41);
    width: 680px;
    padding: 15px;
    height: 70px;
    position: absolute;
    clear: both;
}

小提琴

于 2013-09-19T10:51:08.440 回答