Question

我的导航栏居中，但是当窗口较小时，它只是进入下一行，而不是变小以适应窗口的大小，我不知道如何解决它。它上面有下拉元素。在移动设备上查看时，我也会考虑将其转换为垂直列表，但尚未接近进行媒体查询。

这是我的HTML：

$(window).load(function() {
    var $link = $(location.href);
    if($link.length {
        var position = $$link.offset().top - $('#header').height()
        $(window.animate({scrollTop: position},{duration: 500})
    }
});

这是我的CSS：

<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>

谢谢。

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，它都不会起作用。

建议：

首先使用适当的类在顶部导航项上修复HTML文档的结构，并正确嵌套导航项。*
我建议重组信息架构，以便在菜单中包含较少的导航项。例如，在您的“关于”页面中进行识别是有意义的。如果这是一个投资组合类型的网站，将您的摄影，平面设计和3D建模折叠到项目中会很有效。如果您关注分离，那么这将作为子导航在页面中发生。
如果您打算保留导航结构，建议您将菜单折叠到移动设备上的选择菜单或汉堡菜单中，因为有一大块用户的移动设备屏幕导航消耗的对您的用户来说不是一个好的体验。最重要的是，你必须考虑到用户不能轻视＆＃34;在移动设备上，这些下拉菜单的大小最多也难以导航。

*解决方案： 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;
}

还有一些小的设计可以调整，但这可以根据你的问题得到你想要的东西。

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

3 个答案: