Question

标记：

<section>
    <h1>Title of this section</h1>

    <ol>
        <li>Thing thing thing thing thing thing thing thing</li>
        <li>Thing Thing Thing Thing THING THING THING</li>
    </ol>

    <nav>
        <ol>
            <li>Place1</li>
            <li>PlaceThatIsSecond</li>
            <li>Place3</li>
            <li>Place4</li>
            <li>Place5</li>
        </ol>
    </nav>
</section>

样式：

section > ol {
        display: block;
        float: right;
        clear: both;
        max-width: 80%;
}

section > nav {
    max-width: 20%;
}

缩小窗口时，会出现一个长项导致列表的其余部分被推送到主内容下面的点，但左边的早期列表项仍然在上面。真的，整个事情应该立刻下降，或者可能只是继续缩小。我没有遇到类似使用段落和块引用的侧边栏样式的行为。这是我的浏览器选择布局列表的方式特别的东西，还是它在标准中，我错过了什么？

Answer 1

如果你添加一个位置：绝对;它应该解决主要内容被推到下面的问题。

section > ol {
    display: block;
    float: right;
    clear: both;
    max-width: 80%;
}
section > nav {
   max-width: 20%;
   position:absolute;
}

希望这有帮助。

Answer 2

将section > ol更改为section ol，以确保该块适用于ol元素。

奇怪的包装与列表和浮动

2 个答案: