我正在尝试将输入字段与 tchat 底部的按钮对齐。
这是正常屏幕尺寸 +15"的结果
这是 -15"的结果
HTML :
<div class="col footer">
<div class="divider"></div>
<div class="row footer-input input-container form-group">
<div class="input-field inline col s10 m10">
<input #messageInput type="text">
<label for="message">Tapez votre message</label>
</div>
<div class="col button-col s2 m2">
<a class="waves-effect btn blue"">
<i class="material-icons">send</i></a>
<app-loading-panel [visible]="isSending"></app-loading-panel>
</div>
</div>
</div>
样式:
div.divider {
margin-top: 2px;
}
div.footer {
position: absolute;
bottom: 0;
margin: 0;
width: 100%;
}
div.input-container {
vertical-align: middle;
padding-top: 10px;
}
input[type=text]:focus:not([readonly]) {
border-bottom: 1px solid #2196F3;
box-shadow: 0 1px 0 0 #2196F3;
}
input[type=text]:focus:not([readonly]) + label {
color: #2196F3;
}
div.footer-input {
margin-bottom: 0;
}
div.button-col {
height: 100%;
}
我不擅长使用 css,我怎样才能让输入尽可能地占据所有位置,按钮位于右侧并垂直居中并且没有任何内容超出范围?
最佳答案
从基本的 Angular 来看,这可能对您有所帮助:
- 有一个 flex 盒子容器
- 为输入分配 1 的 flex-grow
- 这将确保输入占据大部分空间,而按钮保留在右侧。
.container {
width: auto;
background: #ebebeb;
display: flex;
flex-direction: row;
}
.container input {
flex-grow: 1;
}
<div class="container">
<input type="text" placeholder="Some Stuff"/>
<button> Button </button>
</div>
关于html - 将输入字段与较小屏幕中的按钮对齐超出范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49029399/