Angular中如何实现Cat与Dog组件并排展示而非上下排列？

最符合Angular设计规范的实现位置是 App.Component 对应的模板和样式文件，不需要修改index.html或全局styles.css，具体实现步骤如下：

实现步骤 #

1. 调整App组件模板（app.component.html） #

给两个子组件套一层公共父容器，方便统一控制布局：

<!-- app.component.html 代码示例 -->
<div class="animal-wrapper">
  <!-- 下方组件选择器以实际创建组件时的selector配置为准 -->
  <app-dog></app-dog>
  <app-cat></app-cat>
</div>

2. 编写布局样式（app.component.css/scss/less） #

用Flex布局实现横向排列，代码最简单适配性最强：

/* app.component.css 代码示例 */
.animal-wrapper {
  /* 核心：开启Flex横向布局 */
  display: flex;
  /* 可选配置：两个组件间距 */
  gap: 24px;
  /* 可选配置：内容水平居中 */
  justify-content: center;
  /* 可选配置：两个组件垂直方向对齐 */
  align-items: center;
}

不同文件的适用场景说明 #

• 不要写在index.html：仅作为项目入口根页面，只放全局根级结构，不要耦合业务组件的布局逻辑
• 不要写在全局styles.css：仅存放项目通用全局样式（如样式重置、公共主题规则），局部布局样式写在这里会污染全局作用域，也不符合Angular样式隔离的设计原则
• 不要写在Dog/Cat组件自身的样式文件：会让布局逻辑和业务组件耦合，降低子组件的复用性，后续调整排列方式时还要修改多个文件

可选响应式适配 #

如果需要小屏设备下自动切换为上下堆叠，补充媒体查询即可：

@media (max-width: 768px) {
  .animal-wrapper {
    flex-direction: column;
  }
}

内容的提问来源于stack exchange，提问作者user17151182