html - <nav> 页面左下方

Question

HTML 5 的优势之一是像 <header> 这样的语义标签。 , <nav>和 <main> .

不幸的是，我还没有找到一种方法来设置它们的样式，所以 <nav>在页面左侧向下，并非没有 parent <div> ，无论如何。在我看来，这样一个<div>搞乱了语义，我不确定它在技术上是否有效。

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

CSS:

div.nav-main {
    display: flex;
}
nav {
    width: 10em;
}
nav a {
    display: block;
}

没有<div> 有没有干净的方法呢？ ？

我不认为老派 float: left是一个解决方案，因为我不想要 <main>环绕<nav>如果它更高，我不想添加任意高度或其他技巧。我只想要 <main>和 <nav>既是它们的自然高度又具有一致的宽度，并且对于 <footer>在两者之下。

否则，如果有人可以保证包装 <nav>和 <main>在<div>没关系，我会感谢你并继续前进......虽然它对我来说仍然不是很优雅。

Answer 1

所以一个<div>是一个非语义元素，所以从技术上讲，你在这里有有效的 html。但我明白不想到处都是 div。您可以将 flex 放在 body 上，将页眉和页脚的宽度设置为 100%，这样它们就会在自己的行上。所以会是

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

希望对您有所帮助!