如何在 Angular 组件中定位 Div答案

【问题标题】：How to position Divs in Angular components如何在 Angular 组件中定位 Div
【发布时间】：2021-01-29 09:42:57
【问题描述】：

我正在创建一个简单的 Angular 应用程序，我想在其中将导航栏放在左侧。问题是我很容易获得导航栏，但是当我尝试处理内容（应该在导航栏旁边）时，它总是在我的导航栏“下方”。我尝试了几件事来改变，但组件之间的 CSS 对我来说不是那么容易理解。

转到代码，我有：我的导航栏，由以下 1 个 CSS 类描述：

.navbar{
height: 100%;
position: fixed;
background-color: gray;
overflow: auto;
}

在 app.component.html 中，我将导航栏定义为第一个元素，然后是路由器插座，就像这里一样：

<div>
<app-main-nav></app-main-nav>
</div>
<div>
<router-outlet></router-outlet>
</div>

“（欢迎使用）良好实践服务！”句子在导航栏后面开始。

你有一些提示如何在组件之间定位相关的 Div 以避免这种情况吗？

【问题讨论】：

【解决方案1】：

您是否将 css 类添加到 div 中？

【讨论】：

这个答案可以进一步发展——但这也是我的第一个想法。从代码示例来看，包含 app-main-nav 的 div 似乎没有类“navbar”。
好吧，我还没有清楚地表明这一点，但是 .navbar 类被添加到 main-nav 组件的 html 中。但是当我尝试在应用程序组件中添加 .navbar 类时，结果仍然相同。这很奇怪，因为 CSS 类运行良好，但 div 彼此忽略。