将输入字段与较小屏幕中的按钮对齐超出范围

Question

我正在尝试将输入字段与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>

Css：

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并不擅长，我怎样才能让输入占据所有位置，按钮位于右侧并且垂直居中，没有任何超出范围？

Answer 1

这可能从基本的角度来帮助你：

1. 有一个容器是一个弹性盒子
2. 为输入分配flex-grow为1
3. 这将确保输入占据大部分空间，而按钮保持在右侧。

.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>