Question

我想要一组导航丸，我将在@media（最大宽度：767px）的窗口底部和@media（最小宽度：768px）的屏幕顶部显示以下是导航丸。我可以毫无问题地使它成为中心。如果我添加固定位置并将其放在页面底部，我将无法再使用带有文本对齐中心的内联块。

如何让导航丸居中并固定在一定高度？

HTML

<ul id="thisMenu" class="nav nav-pills">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
</ul>

CSS

#thisMenu > li {
    float:none!important;
    display:inline-block!important;
}

#thisMenu {
    text-align:center!important;
}

http://jsbin.com/ojuyam/1/edit

这个jsbin显示在页面底部，但没有居中。（也不会粘在窗户的底部，它会粘在页面的底部。）

http://jsbin.com/ojuyam/5/edit

Answer 1

你只需要给它一个宽度。如果您添加width: 100%;，它将有效。见http://jsbin.com/ojuyam/6/edit

Answer 2

这样的事情应该有效：

#thisMenu {
    width: 148px;
    position: fixed;
    bottom: 20px;
    left: 50%;
    margin-left: -74px;
}

那就是这样：

#thisMenu {
    position: fixed;
    bottom: 20px;
    text-align: center;
    width: 100%;
}

中心导航丸在页面上，但有固定的位置

2 个答案: