Html <；导航>；在页面的左边

HTML5的优点之一是语义标记，如

、

和

不幸的是，我还没有找到一种方法来设置它们的样式，因此

会在页面的左侧，无论如何，没有父级

。在我看来，这样的

会弄乱语义，我不确定它在技术上是否有效

<header>My Page</header>
<div class="nav-main"> <!-- I don't like this -->
    <nav>
        <a href="/foo.html">Foo</a>
        <a href="/bar.html">Bar</a>
    </nav>
    <main>
        <h1>My Main Content</h1>
        <p>Blah.</p>
    </main>
</div>
<footer>ⓒ Not really copyright</footer>

没有

，有没有一种干净的方法可以做到这一点

我不认为老式的

浮动：left

是一个解决方案，因为如果

更高，我不希望

缠绕在

周围，我也不想添加任意高度或其他技巧。我只希望

和

都是它们的自然高度，并且具有一致的宽度，

位于两者下方

否则，如果有人能保证将

和

包装在

中是可以的，我将感谢您并继续……尽管在我看来它仍然不是很优雅。

所以

是一个非语义元素，所以您在技术上拥有有效的html。但我理解不想到处都有div。您可以在主体上添加flex，将页眉和页脚的宽度设置为100%，使它们位于各自的行上。那就是

body 
{
 display:flex;
 flex-flow: row wrap;
}
header, footer
{
 width:100%
}

---

希望这有帮助

您太努力了，无法实现最低限度的标记。与几乎所有的网站相比，你所拥有的是极其简单的。如果在布局中使用几个div元素是可行的，那么就没有问题了

---

关键在于相关内容包含在语义元素中，而不是只使用语义元素。如果你正在做任何一种现代的、灵活的、反应迅速的布局，这是不可避免的

关于

或

的合法父母是否可以成为

的合法父母，我还没有找到“官方”（W3C）的说法，但我相信。他们说：

• 可以将“[a]ny元素接受”作为父元素，并且
• “的父元素可以是任何元素”[w]，此处应为流内容，但前提是它是”

---

因此，在本例中，

很好。

必须尝试将

显示：block

和

位置：relative

（或类似）应用于这些元素？@Johannes:我没有想到，但我只是尝试删除

，并将您建议的属性应用于

和

，而

仍位于

的顶部。所以，谢谢，但我认为这行不通；我发现创建这种列设置的唯一方法是使用flexbox，或者使用一大堆可怕的黑客，这就是为什么我在这里使用flexbox。你没有真正描述你想要什么。我的评论只是建议您可以使用CSS属性对这些HTML5元素进行任意样式化。但是，如果您希望

nav

和

main

成为灵活的项目，那么在它们周围放置一个包装器元素（DIV）将

flex

应用于该项目是没有办法的。正如您所写的，这些元素是语义的，但它们没有任何固有的“自动CSS”，以任何特定的方式对它们进行样式设置。@Johannes:我不一定希望它们是flex项；只是flexbox是我找到的做我想做的事情的唯一方法，我在最后一段的第二段中解释了这一点。它的设置与许多网站的设置几乎相同，但与StackOverflow页面上的导航栏不同，因此我认为仅使用HTML5的语义标记和CSS3就可能实现。但听起来你好像说不是，我想这回答了我的问题。谢谢。您可以在这两个页面上都使用

display:inline block

，并为它们设置总宽度等于或略小于页面宽度的宽度（使用百分比值）。这与HTML5无关，但无论如何也不需要包装器元素（如果你不需要其他任何东西的话）。啊，是的，我是从这个方向开始的，但我没有想到这是将页眉和页脚放在它们自己的“行”上的方法。非常感谢！嗯，是的，为了这个问题的目的，我编了一个非常简单的例子。我并不是试图只使用语义元素；我只是没有找到任何关于

在技术上是否可以是

和

的父母的官方说法。但我最终在MDNWeb文档中找到了它，这些对我来说已经足够好了。

body 
{
 display:flex;
 flex-flow: row wrap;
}
header, footer
{
 width:100%
}