什么将 Blazor WASM 模板 MainLayout.razor <div>s 布置为内联元素？答案

【问题标题】：What lays out the Blazor WASM template MainLayout.razor <div>s as inline elements?什么将 Blazor WASM 模板 MainLayout.razor <div>s 布置为内联元素？
【发布时间】：2021-02-26 03:03:48
【问题描述】：

我正在尝试了解 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 布置为内联元素的内容。

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

【问题讨论】：

标签： html css razor blazor blazor-client-side

【解决方案1】：

它们不是“内联”布局的。

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

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

【讨论】：

谢谢亨克。最欣赏。我理解您的意思是在创建 blazorwasm 和 blazorserver 应用程序时将 MainLayout.razor 设置为 Flex 容器。它是否正确？根据您的回答，我在 MSDN 中搜索了一些参考资料，我唯一能找到的是一个不再更新的页面，标题为 2016 年 10 月 20 日的“灵活框布局（flexbox）”。您能否指出描述该过程的任何最新的 MSDN 文档？你提到 MainLayout.razor.css。我一直在寻找它但没有成功。它在哪里生活？再次感谢您的帮助。
对于 CSS，您可以访问 Mozilla.org 或 w3schools。在 VS 中使用 net5，css 文件嵌套在 razor 文件下，您可以单击一个小三角形。对于早期的 Blazor 版本，请参阅 wwwroot/css/site.css
谢谢亨克。我明白了。