我怎样才能让这两个项目正确对齐?我试图让它们完全对齐,但调整按钮高度只会让底部离搜索输入的底部更远。我认为这是因为它们的中心没有对齐,所以调整高度并不是正确的解决方案。
这是HTML
<!-- Search Box and Button-->
<p>Search by company name:</p>
<mat-form-field appearance="outline">
<mat-label>Search</mat-label>
<input matInput placeholder="Search">
</mat-form-field>
<button mat-stroked-button color="primary">Search</button>
以下是SCSS:
mat-form-field.mat-form-field {
font-size: 12px;
width: 300px;
}
button.mat-stroked-button {
font-size: 14px;
height: 42px;
margin: 10px;
}
2条答案
按热度按时间jei2mxaa1#
为了实现水平对齐,你需要在标记中做一些调整,并使用flex属性来实现完美的对齐。我添加了一些div作为父类,但如果你愿意,你可以将CSS分配给你代码的实际父类。我在下面添加了我的代码片段,相应地更新HTML和CSS:
0x6upsns2#