html - 消除输入和按钮之间的间隙

Question

我正在尝试在文本字段附近放置一个按钮。

这里是我认为可以让它工作的代码

<input class="txt" type="text" name="name">
<button class="btn">Submit</button>


.txt {
  display: inline-block;
  width: 80%;
  outline: none;
  margin:0;
}

.btn {
  display: inline-block;
  width: 20%;
  margin:0;
}

http://jsfiddle.net/rm9etsny/

但是，2个元素之间还是有差距的。我怎样才能删除它？

谢谢

Answer 1

您可以将您的 html 内容内联。这将删除空间而不会将 margin-left 设为负值

<input class="txt" type="text" name="name"><button class="btn">Submit</button>

另外，为了让它们在水平行中对齐，您需要考虑减少输入的百分比。

演示 - http://jsfiddle.net/RahulB007/rm9etsny/5/