頁面上的中心導航藥丸，但有固定的位置

我想有一組導航藥片，我將在@media（max-width：767px）窗口的底部顯示並在屏幕的頂部at @media（min-width：768px）下面是nav-pills。我可以讓它中心沒有問題。如果我添加固定位置並將其放在頁面的底部，我不再能夠將內嵌塊與文本對齊中心一起使用。頁面上的中心導航藥丸，但有固定的位置

我怎樣才能讓nav-pills都居中並固定在某個高度？

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

來源

2013-05-01 zmanc

一些這樣的事？ http://jsbin.com/ojuyam/2/edit – DiederikEEn 2013-05-01 12:56:40

添加清除使nav-pills不再居中。我添加了一個底部屬性將其放到底部。 http://jsbin.com/ojuyam/5/edit，但仍然不居中。 – zmanc 2013-05-01 13:05:36

你只需給它的寬度。如果你添加width: 100%;它會起作用。見http://jsbin.com/ojuyam/6/edit

來源

2013-05-01 20:51:53

實際上這確實按預期工作。謝謝！ – zmanc 2013-05-02 14:30:18

像這樣的東西應該工作：

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

所以纔會這樣：

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

來源

2013-05-02 14:08:43

頁面上的中心導航藥丸，但有固定的位置

回答

相關問題