底部固定导航栏答案

【问题标题】：Bottom fixed navigation bar底部固定导航栏
【发布时间】：2014-12-23 15:27:42
【问题描述】：

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

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

这是我的代码：

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>

【问题讨论】：

用fixed代替absolute，你的定位方式也不好
感谢你们俩。圣诞节后我会有更多的时间来做这件事。希望结果出来！

标签： html css

【解决方案1】：

用fixed代替absolute，你的定位方式也不高效

 #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>

【讨论】：

【解决方案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;
}

【讨论】：