是什么将 Blazor WASM 模板 MainLayout.razor <div> 设置为内联元素？

Question

我正在尝试了解 Blazor WebAssembly (blazorwasm) 模板的工作原理。我看不到 MainLayout.razor

的布局

<div class="sidebar">
    <NavMenu />
</div>

和

<div class="main">
    <div class="top-row px-4">
        <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
    </div>

作为内联元素。插入

时更疑惑了

<div>
    <p>Why is this inline?</p>
</div>

介于 <div class="sidebar"> 和 <div class="main"> 之间，因为它也被布置为内联元素。

我理解 <div> 是一个总是在新行开始的块级元素。我搜索了从 Blazor WebAssembly (blazorwasm) 模板生成的解决方案，并查看了 MSDN Blazor Layouts doco，但找不到任何将块级别 <div>s 布置为内联元素的内容。

谁能告诉我我错过了什么？

Answer 1

它们没有布局 'inline'。

Blazor 模板使用 css。在net5中MainLayout.razor.css设置周围<div class="page">使用FlexBox和flex-direction: column;实现整体布局

您的 <div> ... </div> 因其父元素而被定位为弹性列。

What lays out the Blazor WASM template MainLayout.razor <div>s as inline elements?