中心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屋!