中心nav-pill在页面上，但有固定的位置 [英] center nav-pills on page but have fixed position

问题描述

我想有一组nav-pill，我将显示在@media（max-width：767px）窗口的底部，在屏幕顶部@media（min-width：768px）下面是nav-pills。我可以让它中心没有问题。如果我添加位置固定，并将其放在页面的底部，我不能再使用inline-block与text-align中心。

我如何

 <$> 
 
 c $ c>< ul id =thisMenuclass =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

解决方案

你只需要给它一个宽度。如果你添加 width：100％; 它会工作。请参见 http://jsbin.com/ojuyam/6/edit

I want to have a set of nav-pills that I will display at the bottom of the window in @media (max-width: 767px) and at the top of the screen at @media (min-width: 768px) Below is the nav-pills. I can make it center without issue. If I add position fixed and put it at the bottom of the page I am no longer able to use the inline-block with the text-align center.

How can I have the nav-pills both centered and fixed to a certain height?

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

This jsbin shows it at the bottom of the page, but not centered. (also does not stick to bottom of the window, it sticks to bottom of the page.)

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

解决方案

You just need to give it a width. If you add width: 100%; it will work. See http://jsbin.com/ojuyam/6/edit

这篇关于中心nav-pill在页面上，但有固定的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！