Question

我希望导航栏位于页面的底部，我已经能够做得很好，但我认为我选择了一种非常糟糕的方法来定位链接的位置。我使用绝对定位完成它的方式的问题是当我缩小屏幕时，它会在没有滚动条的情况下切断所有内容。如果我使用float，我不知道如何使用第一个链接的图像替换技巧。

理想情况下，它应该保持所有中心直到窗口太小，然后允许用户左右滚动以查看被切断的内容。我确信有一个简单的解决方法，但我很难找到有关图像替换的底部固定菜单的链接定位的任何信息。我很感激帮助。

这是我的代码：

li#initials{
    position: absolute;
    top: 5px;
    left: 200px;
    width: 50px;
    height: 45px;
    background: url(../images/initials.jpg) no-repeat 0 0;
    text-indent: -9999px;
}

/*makes initials img clickable*/
#initials a{
    display: block;
    width: 50px;
    height: 45px;
}

li#story {
    position: absolute;
    top: 15px;
    left: 300px;
}
li#gallery {
    position: absolute;
    top: 15px;
    left: 400px;
}
li#party {
    position: absolute;
    top: 15px;
    left: 500px;
}
li#event {
    position: absolute;
    top: 15px;
    left: 650px;
}
li#travel {
    position: absolute;
    top: 15px;
    left: 750px;
}
li#rsvp {
    position: absolute;
    top: 15px;
    left: 850px;
}
li#gifts {
    position: absolute;
    top: 15px;
    left: 950px;
}
li#print {
    position: absolute;
    top: 15px;
    left: 1050px;
}

<nav id="page-menu">
    <ul id="bottom-nav">
        <li id="initials"><a href="home.html">Home</a></li>
        <li id="story"><a href="story.html">Our Story</a></li>
        <li id="gallery"><a href="gallery.html">Gallery</a></li>
        <li id="party"><a href="party.html">Wedding Party</a></li>
        <li id="event"><a href="event.html">Event</a></li>
        <li id="travel"><a href="travel.html">Travel</a></li>
        <li id="rsvp"><a href="rsvp.html">RSVP</a></li>
        <li id="gifts"><a href="gifts.html">Gifts</a></li>
        <li id="print"><a href="images/invitation.pdf">Print</a></li>
    </ul>
</nav>

Answer 1

使用固定而不是绝对，你的定位方式也不高效

 #page-menu{ position:fixed; bottom:0px; left:15%;}

#page-menu li{ display:inline-block; padding:10px;}

<nav id="page-menu">
    <ul id="bottom-nav">
        <li id="initials"><a href="home.html">Home</a></li>
        <li id="story"><a href="story.html">Our Story</a></li>
        <li id="gallery"><a href="gallery.html">Gallery</a></li>
        <li id="party"><a href="party.html">Wedding Party</a></li>
        <li id="event"><a href="event.html">Event</a></li>
        <li id="travel"><a href="travel.html">Travel</a></li>
        <li id="rsvp"><a href="rsvp.html">RSVP</a></li>
        <li id="gifts"><a href="gifts.html">Gifts</a></li>
        <li id="print"><a href="images/invitation.pdf">Print</a></li>
    </ul>
</nav>

Answer 2

此代码始终在中心保留菜单。

JSFiddle：http://jsfiddle.net/jennift/qsu3q3q6/1/

<nav>
<div id="page-menu">
    <ul id="bottom-nav">
        <li id="initials"><a href="home.html">Home</a></li>
        <li id="story"><a href="story.html">Our Story</a></li>
        <li id="gallery"><a href="gallery.html">Gallery</a></li>
        <li id="party"><a href="party.html">Wedding Party</a></li>
        <li id="event"><a href="event.html">Event</a></li>
        <li id="travel"><a href="travel.html">Travel</a></li>
        <li id="rsvp"><a href="rsvp.html">RSVP</a></li>
        <li id="gifts"><a href="gifts.html">Gifts</a></li>
        <li id="print"><a href="images/invitation.pdf">Print</a></li>
    </ul>
</div>
</nav>

nav {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    background:#666;
    width:100%;
}
#page-menu {
    width: 80%; //whatever you width is
    margin:0 auto;
    background:#f00;
    text-align:center; //remove this if you want
}

#bottom-nav li {
    display:inline-block;
    padding:5px;
}

底部固定导航栏

2 个答案: