右边距负数使输入向右移动

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

我会根据以下建议提出更多建议：

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

this

Answer 2

既然您说过您不希望使用弹性解决方案，那么如何删除负数margin-right并将width: 100%替换为width: 88%。

话虽这么说，并且由于我是flexbox的忠实拥护者，所以以下是与James产品不同的flex解决方案：

form {
  border: 1px solid green;
  max-width: 400px;
  display: flex; /* Added */
  justify-content: flex-end; /* Added */
}

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

Answer 3

您可以制作input的容器position: relative和button position: absolute。然后，您可以将button相对于容器移动至所需位置。我会建议使用比form元素以外的东西，这样就可以有一个以上的元素form。我已经添加一个简单的缠绕div。

然后将其设置为略大于0的右侧，以便可以看到边框，并且顶部到底部的一半，减去按钮高度的一半，使其垂直居中。

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

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

.search {
  /* Making the container relative... */
  position: relative;
}

input {
  border: 1px solid red;
  background-color: white;
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  margin: 0;
  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;
  /* means you can absolutely position the button relative to that */
  position: absolute;
  /* make it one pixel off the right for the border */
  right: 1px;
  /* make it 50% - half its height to center it vertically */
  top: calc(50% - 14px);
}

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>
  <div class="search">
    <input type="text">
    <button><i class="fa fa-search"></i></button>
  </div>
</form>