去除输入框和按钮之间的间隙。

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/

然而，这两个元素之间仍然存在空隙。我该如何去除它？

谢谢

- Sig

Answer 1

您可以将HTML内容内联。这样可以去掉空格，而不需要将margin-left设置为负值。

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

同时，如果您想让它们在水平行中对齐，您需要考虑将一些较小的%分配给输入。

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

- RahulB

---

这似乎解决了问题，但为什么我必须添加负边距？有没有一种方法可以在不使用这个技巧的情况下实现我想要的效果？ - Sig

是的，我认为它会做到 @macsig - Arnab Nandy

是的，如果你也添加* { box-sizing: border-box; }，你可以保持80/20，而不需要使用更少的%。http://jsfiddle.net/torbcfuh/ - Sig

为了将这两个元素分开放在不同行中，可以在它们之间添加注释。http://jsfiddle.net/torbcfuh/1/ - Sig

@ macsig：是的，这是最好的方法。它可以使您的代码易读。我只是添加了内联，因为示例中只有2个元素。在正常情况下，添加注释是更好的方法。 - RahulB

Answer 2

问题是由于内联块之间会产生额外的间距，您可以通过使用float:left或添加具有font-size:0的父元素来防止它，通过使用box-sizing:border-box，填充从内部给出。

例如，如果输入宽度为100％，填充为15px，则总宽度将为100％+ 15px。box-sizing:border-box从内部给出填充。

在我的示例中，我已将边框更改为outset。

演示- http://jsfiddle.net/rm9etsny/11/。

body {
    background-color: red;
}
div {
    font-size:0;
}
.txt {
    display: inline-block;
    width: 80%;
    font-size: 2em;
    outline: none;
    padding: 15px;
    margin:0;
    box-sizing:border-box;

}
.btn {
    display: inline-block;
    margin: 0;
    outline: 0 none;
    padding: 0;
    width: 20%;
    box-sizing:border-box;
}

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

- Vitorino fernandes

---

谢谢回复。我不喜欢使用无用的div和font-size: 0，而是更喜欢将元素内联并在它们之间加上注释。 - Sig

Answer 3

根据您的需求通过更改值进行调整。

   .txt{
  border:1px solid black;
  color:black;
  height:50px;
  width:400px;
  left:30%;
  position:absolute;
  }

 .btn{
 background:black;
 border:1px solid black;
 color:white;
 height:40px;
 width:60px;
 top:3%;
 right:33%;
 position:absolute;
}

- nitish

Answer 4

您可以在.btn元素上设置负值的margin-top，例如：

margin-top: -3px;

- Jacek Zyśk

---

我所说的间隙不是垂直的，而是水平的。目前按钮位于字段下方，因为元素之间存在水平间隙，因此由于字段占80%，按钮占20%且具有间隙，则总计超过100％，使得按钮被推到字段下方。只需尝试将字段的宽度设置为60％http://jsfiddle.net/zzgor1po/，您就会看到问题。 - Sig