css - 在Angular9中水平对齐两个组件

Question

我有两个组件。一种是搜索表单，一种是搜索表单结果。点击搜索表单中的按钮，显示搜索结果组件。目前它是垂直的。我想要的是在搜索表单旁边显示搜索结果（水平）。

在搜索表单 html 中，我将引导网格设为 4，在搜索结果中，我给出了 8。

我试图将通用 div 类放入全局 style.css 并将其设置为display: inline-block但没有运气。

我的第一个组件是引导表单。我的第二个组件是 PrimeNG 数据表。

我试过什么？

Component 1 templateUrl : 'component1.html' > div classes to create a search form and parent div having test as class
Component 2 tempalteUrl : 'component2.html' > div classes to create a primeNG data table and div having test as class
Global style.css > .test {display: inline-block} so that I can align them horizontally.

编辑

以上我尝试过的方法不能正常工作。我正在添加一个即将推出的示例输出插图。

我实际上是多么想要它

标签： csslayoutprimengangular-componentsangular9

Answer 1

也许你需要添加宽度百分比，所以它会是 ex: ' width: 19%; '</p>