Question

我的网站是www.rosstheexplorer.com

我希望导航菜单的长度与标题相同。标题始终覆盖页面的整个宽度。

我尝试了宽度，最大宽度和浮动但我无法达到预期的效果。

以下是我尝试的其中一项实验。

@media screen and (min-width: 50em)
.main-navigation {
    font-size: .8125em;
    line-height: 2.09231em;
    text-align: center;

width: 100%
        float:left

}

我能够让菜单覆盖页面的左侧或右侧，但不能覆盖页面的两侧。

另外，当我改变菜单的宽度时，我无法将文字保持在图像的中心位置。

有没有人有任何想法？

Answer 1

您只需要从页面div中拉出标题元素：

<div class="header">[...]</div>
<div id="page" class="hfeed site">
  // This needs to go up
  <header id="masthead" class="site-header" role="banner">[...]</header>
  [...]
</div>

就像那样：

<div class="header">[...]</div>
<header id="masthead" class="site-header" role="banner">[...]</header>
<div id="page" class="hfeed site">
  [...]
</div>

扩展主导航的宽度，但仍保持中心对齐

1 个答案: