Question

HTML 5的优点之一是语义标签，例如<header>，<nav>和<main>。

不幸的是，我没有找到一种样式设置它们的样式，因此<nav>顺着页面左侧向下移动，不是没有父<div>。在我看来，这样的<div>弄乱了语义，而且我不确定它在技术上是有效的HTML。

<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，将页眉和页脚的宽度设置为100％，这样它们就可以放在自己的行上。这样吧

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

希望这会有所帮助！

Answer 2

您正在为实现极简标记而努力。与几乎所有网站相比，您拥有的东西极其简单。如果可以使用几个div元素进行布局，则没有问题。

关键是相关内容包含在语义元素中，而不是仅使用语义元素。如果您要进行任何形式的现代，灵活，响应式布局，则不可避免。

Answer 3

对于<div>可以是<nav>或<main>的合法父母，我仍然没有找到“官方”（W3C）的字眼，但我确实相信{{3 }}。他们说：

Mozilla's web docs可以将'[a] ny元素接受<nav>'作为父元素，并且
flow content的父级可以是任何元素'[w]，此处应有流的内容，但前提是它是<main>'。

因此，在此示例中，<div>很好。

<nav>在页面左侧

3 个答案: