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/

然而，两个元素之间仍然存在差距。我该如何删除它？

由于

Answer 1

您可以将html内容设为内联。这将删除空格而没有边距为负

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

另外，为了使它们在水平行中对齐，您需要考虑给输入少一些。

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

Answer 2

问题是因为内联块在两个项目之间提供了额外的间距，您可以使用float:left或使用font-size:0添加父项来阻止它使用box-sizing:border-box从内部给出填充< / p>

例如

如果输入宽度为100%且填充为15px，则总宽度为100％+ 15px box-sizing:border-box从内部提供padding

在我的示例中，我已将边框更改为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>

Answer 3

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

margin-top: -3px;

Answer 4

根据您的要求根据值的某些变化进行调整。

   .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;
}

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

4 个答案: