html - 导航栏根据窗口大小变化？

Question

我在整个文档中运行媒体查询，但在这里我只想解释发生了什么。是否有可能让这个菜单无论在什么设备上都保持居中？因此，当没有足够的空间让所有菜单项都位于一行时，它会将其余菜单项放在下一行，然后将它们居中在屏幕上，而不是从左边？这可能与我在菜单上留下的 float 有关，但这是我可以使滚动条保持水平的唯一方法。谢谢。

下面是 HTML 和 CSS，但我建议在 JSFiddle 上查看它:https://jsfiddle.net/rt518s7p/

HTML:

<nav id="page-navigation">
      <ul>
            <li><a href="../../index.html" title="Home">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: 70%;
    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;
}

ul.top-menu
{
    padding: 0;   
}

Answer 1

答案:

由于您的 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;
}

仍有一些小的样式需要调整，但这应该可以根据您的问题为您提供所需的内容。