如何固定输入和按钮之间的间距？

Question

我有一个用于搜索栏的输入标签，还有一个右侧的按钮，用户可以单击该按钮以按Enter。但是，搜索框和按钮之间有间距，我无法找出原因。我尝试使用chrome的inspect元素来确定是否由于某些原因导致了padding-left / right的错位，但是没有任何迹象表明这一点，所以我不确定为什么。这是我的HTML和CSS

.left-nav input[type=text] {
  background-color: #2B2B2B;
  margin-left: 50px;
  padding: 8px;
  border: none;
  border-radius: 8px 0px 0px 8px;
  font-size: 17px;
}

.left-nav ::placeholder {
  padding-left: 6px;
}

.left-nav button {
  padding: 11px 15px;
  background: rgb(184, 184, 184);
  border: none;
  border-radius: 0px 8px 8px 0px;
  cursor: pointer;
}

<div class="left-nav">
  <input type="text" placeholder="Search...">
  <button type="submit"><i class="fas fa-search fa-lg" ></i></button>
</div>

How it's currently showing

Answer 1

尝试如下向按钮添加边距：

.left-nav button {
  padding: 11px 15px;
  background: rgb(184, 184, 184);
  border: none;
  border-radius: 0px 8px 8px 0px;
  cursor: pointer;
  margin-left: -4px;
}

您可以根据在屏幕上看到的内容来调整边距（因为此值是代码段中所做的工作。）