html - margin right negative 使输入向右移动

Question

我有以下 HTML 用于在输入 ( JSFiffle Example ) 中放置一个按钮:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

form {
  border: 1px solid green;
  max-width: 400px;
}

input {
  border: 1px solid red;
  background-color: white;
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  margin: 0;
  margin-right: -80px;
  padding: 12px;
  vertical-align: middle;
  width: 100%;
}

button {
  background-color: white;
  border: none;
  cursor: pointer;
  display: inline-block;
  font-size: 28px;
  line-height: 1;
  margin: 0;
  outline: 0;
  vertical-align: middle;
}

i {
  display: block;
  line-height: 1;
  margin: 0;
  padding: 0;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<form>
  <input type="text">
  <button><i class="fa fa-search"></i></button>
</form>

问题

JSFiddle Example我发布的作品很棒......

但在我的应用程序中，当负边距右侧值大于图标宽度时，输入向右移动并离开容器，左侧有一个空格:

我无法在 JSFiddle 上复制它，但我想知道是否有人知道要寻找什么，因为我一直在尝试一切，但无法解决它。

Answer 1

我会建议更多类似的东西:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

form {
  border: 1px solid green;
  max-width: 400px;
}

.search-input {
  display: flex;
  flex-flow: row nowrap;
  height: 40px;
  border: 1px solid red;
  background-color: white;
  font-size: 18px;
  line-height: 1;
}

.search-field {
  flex: auto;
  border: none;
  padding: 10px;
}

.search-button {
  width: 40px;
  height: 40px;
  font-size: 24px;
  cursor: pointer;
  border: none;
  background: transparent;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<form>
  <div class="search-input">
    <input class="search-field" type="text">
    <button class="search-button" type="submit"><i class="fa fa-search"></i></button>
  </div>
</form>