窗口大小调整时的中心导航栏？

Question

我的导航栏居中，但是当窗口较小时，它会转到下一行，而不是缩小到适合窗口大小，我不知道如何解决它。它有下拉的元素。我也会考虑在移动设备上查看垂直列表，但还没有做媒体查询。

这里是我的HTML：

<nav id="page-navigation"> 
     <ul> 
      <li><a href="index.html">Home</a></li> 
       <ul class="top-menu"> 
        <li><a href="_portfolio/photography.html" onclick="return false">Photography</a> 
        <ul class="sub-menu"> 
         <li><a href="_portfolio/_photography/bmc-himley-mini-show-2015.html">BMC Himley Mini Show 2015</a></li> 
         <li><a href="_portfolio/_photography/kinver-snow.html">Kinver Snow</a></li> 
         <li><a href="_portfolio/_photography/mini-runs-collection.html">"Mini Runs" Collection</a></li> 
         <li><a href="_portfolio/_photography/hofner-bass.html">Hofner Bass</a></li> 
         <li><a href="_portfolio/_photography/nature.html">Nature</a></li> 
         <li><a href="_portfolio/_photography/haynes-motor-museum.html">Haynes Motor Museum</a></li> 
         <li><a href="_portfolio/_photography/miscellaneous.html">Miscellaneous</a></li> 
         <li><a href="_portfolio/_photography/classic-mini.html">Classic Mini</a></li> 
        </ul> 
       </li> 
        <li><a href="_portfolio/graphic-design.html" onclick="return false">Graphic Design</a> 
        <ul class="sub-menu"> 
         <li><a href="_portfolio/_graphic-design/story-bag-artwork.html">"Story Bag" Artwork</a></li> 
         <li><a href="_portfolio/_graphic-design/business-cards.html">Business Cards</a></li> 
         <li><a href="_portfolio/_graphic-design/logo-design.html">Logo Design</a></li> 
         <li><a href="_portfolio/_graphic-design/the-mexican-job.html">"The Mexican Job"</a></li> 
         <li><a href="_portfolio/_graphic-design/magazine-covers.html">Magazine Covers</a></li> 
         <li><a href="_portfolio/_graphic-design/wpap-artwork.html">WPAP Artwork</a></li> 
         <li><a href="_portfolio/_graphic-design/lyric-posters.html">Lyrics Posters</a></li> 
        </ul> 
       </li> 
        <li><a href="_portfolio/3d-modelling.html">3D Modelling</a></li> 
       </ul> 
      <li><a href="about.html">About</a></li> 
      <li><a href="recognition.html">Recognition</a></li> 
     </ul> 
    </nav> 

这是我的CSS：

/*navigation*/ 
#page-navigation 
{ 
    width: 60%; 
    height: 53px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 10px; 
} 

#page-navigation ul li 
{ 
    color: white; 
    list-style: none; 
    background-color: darkslategray; 
    width: 9em; 
    float: left; 
} 

li 
{ 
    position: relative; 
} 

li.title 
{ 
    display: none; 
} 

li a 
{ 
    display: block; 
    color: white; 
    line-height: 1.3em; 
    padding: 1em; 
    text-align: center; 
} 

li a:link 
{ 
    text-decoration: none; 
} 

li a:visited 
{ 
    text-decoration: none; 
    color: white; 
} 

li a:hover, .top-menu > li:hover > a 
{ 
    background-color: rgb(48,48,48); 
} 

li a:active 
{ 
    background-color: dimgray; 
} 

ul.sub-menu 
{ 
    width: auto; 
    height: auto; 
    position: absolute; 
    left: -9000em; 
    overflow: hidden; 
} 

ul.sub-menu li 
{ 
    clear: left; 
    float: none; 
    margin-left: -2.5em; 
    z-index: 1000; 
} 

.top-menu li:hover ul 
{ 
    left: 0; 
} 

ul.sub-menu li a 
{ 
    height: auto; 
    border-bottom: 1px solid gray; 
    padding: .4em 1em; 
    background-color: dimgray; 
    padding-top: 1em; 
    padding-bottom: 1em; 
} 

ul.sub-menu li:last-child a 
{ 
    border-bottom: none; 
} 

ul.sub-menu li a:hover 
{ 
    background-color: darkslategray; 
} 

ul.sub-menu li a:active 
{ 
    background-color: gray; 
} 

谢谢。

Answer 1

你的菜单被指定为60％的可变宽度：

#page-navigation 
{ 
    width: 60%; 
    ... 
} 

这将导致条的宽度与窗口成比例的，并影响其内的元件的位置。为了防止这种情况，指定一个静态的宽度，如：

#page-navigation 
{ 
    width: 1000px; 
    ... 
} 

Answer 2

我只是插入一个一行代码，我认为如果调整屏幕有它看起来相当不错，现在:)

ul.top-menu{ 
    padding: 0; 
} 

是在导航（下一行）前的一个小空间，这解决了这个问题。

参见分辨率上jsfiddle。

Answer 3

答：

因为你的HTML文件的结构方式，它不可能让你得到下列原因预期的效果：

• 你必须直接嵌套的无序列表在另一个无序列表中（1）认为不正确（see this discussion）;但更重要的是，虽然看起来您的导航有6个顶级项目，但您真的只有4个。因此，无论您使用什么CSS，它都无法工作。

建议：

1. 仅使用顶部导航项目，并适当巢您的导航项目的正确类修正你的HTML文档的结构，第一个*

2. 我。会建议重组您的信息架构以在菜单上包含较少的导航项目。例如，识别将有意义进入“关于”页面。如果这是一个投资组合类型的网站，将您的摄影，平面设计和3D建模合并到项目中将会很好。如果您担心分离问题，那么会在页面内发生子导航。

3. 如果您设定保持导航结构，建议您将菜单折叠到移动设备上的选择菜单或汉堡包菜单中，因为导航所消耗的大块人的移动设备屏幕并不是一个好体验为您的用户。最重要的是，你必须考虑到用户不能在移动设备上“悬停”，而且这些下拉菜单的大小很难完全导航。

*解决方案：Demo

HTML（固定）：

<nav id="page-navigation"> 
    <ul> 
    <li><a href="../../index.html" title="Home">Home</a></li> 
    <li class="top-menu"><a href="../../_portfolio/photography.html" onclick="return false">Photography</a> 
     <ul class="sub-menu"> 
     <li><a href="../../_portfolio/_photography/bmc-himley-mini-show-2015.html">BMC Himley Mini Show 2015</a></li> 
     <li><a href="../../_portfolio/_photography/kinver-snow.html">Kinver Snow</a></li> 
     <li><a href="../../_portfolio/_photography/mini-runs-collection.html">"Mini Runs" Collection</a></li> 
     <li><a href="../../_portfolio/_photography/hofner-bass.html">Hofner Bass</a></li> 
     <li><a href="../../_portfolio/_photography/nature.html">Nature</a></li> 
     <li><a href="../../_portfolio/_photography/haynes-motor-museum.html">Haynes Motor Museum</a></li> 
     <li><a href="../../_portfolio/_photography/miscellaneous.html">Miscellaneous</a></li> 
     <li><a href="../../_portfolio/_photography/classic-mini.html">Classic Mini</a></li> 
     </ul> 
    </li> 
    <li class="top-menu"><a href="../../_portfolio/graphic-design.html" onclick="return false">Graphic Design</a> 
     <ul class="sub-menu"> 
     <li><a href="../../_portfolio/_graphic-design/story-bag-artwork.html">"Story Bag" Artwork</a></li> 
     <li><a href="../../_portfolio/_graphic-design/business-cards.html">Business Cards</a></li> 
     <li><a href="../../_portfolio/_graphic-design/logo-design.html">Logo Design</a></li> 
     <li><a href="../../_portfolio/_graphic-design/the-mexican-job.html">"The Mexican Job"</a></li> 
     <li><a href="../../_portfolio/_graphic-design/magazine-covers.html">Magazine Covers</a></li> 
     <li><a href="../../_portfolio/_graphic-design/wpap-artwork.html">WPAP Artwork</a></li> 
     <li><a href="../../_portfolio/_graphic-design/lyric-posters.html">Lyrics Posters</a></li> 
     </ul> 
    </li> 
    <li><a href="../../_portfolio/3d-modelling.html">3D Modelling</a></li> 
    <li><a href="../../about.html">About</a></li> 
    <li><a href="../../recognition.html">Recognition</a></li> 
    </ul> 
</nav> 

CSS（固定和更新）：

/*navigation*/ 

#page-navigation { 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 10px; 
} 

#page-navigation ul { 
    text-align: center; 
} 

#page-navigation ul li { 
    color: white; 
    list-style: none; 
    background-color: darkslategray; 
    width: 9em; 
    /* float: left removes any possibility of it centering */ 
    display: inline-block; 
} 

li { 
    position: relative; 
} 

li.title { 
    display: none; 
} 

li a { 
    display: block; 
    color: white; 
    line-height: 1.3em; 
    padding: 1em; 
    text-align: center; 
} 

li a:link { 
    text-decoration: none; 
} 

li a:visited { 
    text-decoration: none; 
    color: white; 
} 

li a:hover, 
.top-menu > li:hover > a { 
    background-color: rgb(48, 48, 48); 
} 

li a:active { 
    background-color: dimgray; 
} 

ul.sub-menu { 
    width: auto; 
    height: auto; 
    position: absolute; 
    left: -9000em; 
    overflow: hidden; 
} 

ul.sub-menu li { 
    clear: left; 
    float: none; 
    margin-left: -2.5em; 
    z-index: 1000; 
} 

.top-menu:hover ul { 
    left: 0; 
} 

ul.sub-menu li a { 
    height: auto; 
    border-bottom: 1px solid gray; 
    padding: .4em 1em; 
    background-color: dimgray; 
    padding-top: 1em; 
    padding-bottom: 1em; 
} 

ul.sub-menu li:last-child a { 
    border-bottom: none; 
} 

ul.sub-menu li a:hover { 
    background-color: darkslategray; 
} 

ul.sub-menu li a:active { 
    background-color: gray; 
} 

ul.top-menu { 
    padding: 0; 
} 

还有一些小的花式到调整，但这应该根据你的需要得到你想要的Stion的。