- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我怎样才能让这两个元素正确对齐?我试图让它们完美对齐,但调整按钮高度只会使底部离搜索输入的底部更远。我认为这是因为它们的中心没有对齐,所以调整高度并不是真正的正确解决方案。
这是 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>
mat-form-field.mat-form-field {
font-size: 12px;
width: 300px;
}
button.mat-stroked-button {
font-size: 14px;
height: 42px;
margin: 10px;
}
最佳答案
要实现水平对齐,您需要对标记进行一些调整并使用 flex 属性来实现完美对齐。我添加了一些 div 作为父级,但如果您愿意,可以将 CSS 分配给代码的实际父类。我在下面添加了我的片段代码,相应地更新 HTML 和 CSS:
.searchcontainer {
text-align:center;
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.searchcontainer .search-part {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
mat-form-field.mat-form-field {
font-size: 12px;
width: 300px;
}
button.mat-stroked-button {
font-size: 14px;
height: 42px;
margin: 10px;
}
<div class="searchcontainer">
<p>Search by company name:</p>
<div class="search-part">
<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>
</div>
</div>
关于html - 如何将 mat-button 与 mat-input 对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60251487/
我遇到过这个 html: 上面的html和这个有什么区别: 最佳答案 来自MDN page on the tag : 对于 type 的属性标签,可能的值是: 提交:按钮将表单数据提交给服务器
Button button= (Button) findViewbyID(R.id.button); 和 Button button = new Button(this); 有什么区别? 最佳答案 有
我是一名优秀的程序员,十分优秀!