如何调整输入文本和输入提交之间的间距[重复]答案

【问题标题】：How to adjust the spacing between input text and input submit [duplicate]如何调整输入文本和输入提交之间的间距[重复]
【发布时间】：2025-12-29 20:40:07
【问题描述】：

我正在处理自动完成表单，但我似乎在文本和提交表单之间的填充方面遇到了一些问题。我似乎无法调整文本和提交项目之间的间距，这是我需要的，因为当我增加文本字段的大小时，它会覆盖提交按钮。我相信我已经尝试了所有类型的填充，但它们什么也没做。有人可以给我一个线索吗？

.autocomplete {
  position: relative;
  display: inline-block;
}

input {
  border: 1px solid;
  padding: 5px;
  font-size: 24px;
}

input[type=text] {
  border-color: #808080;
  background-color: #fff;
  width: 100%;
  -webkit-border-radius: 5px;
  padding: 5px;
}

input[type=submit] {
  margin-left: 5px;
  padding: 5px;
  background: #ccc;
  cursor: pointer;
  -webkit-border-radius: 5px;
  border: 1px solid;
  background-color: DodgerBlue;
  border-color: #CCCCCC;
  color: #fff;
}

<form autocomplete="off" action="/action_page.php">
  <div class="autocomplete" style="width:300px;">
    <input id="myInput" type="text" name="myCountry" placeholder="Country">
  </div>
  <input type="submit">
</form>

【问题讨论】：

可以在input[type=submit] {}中增加margin-left的值
@Thanthu 谢谢，这行得通。也许更合适的问题是根据文本字段的结尾调整提交按钮。这可能吗？
您可以为要添加空间的元素添加边距。在您的情况下，将margin-right: 5px; 添加到input[type=text]{} 就是您的意思。我已将评论发布为答案

标签： html css

【解决方案1】：

将box-sizing: border-box 添加到您的input[type=text] - 默认的content-box 设置意味着当您将padding 添加到一个元素时，它会增加其尺寸。

请看下面的演示：

.autocomplete {
  position: relative;
  display: inline-block;
}

input {
  border: 1px solid;
  padding: 5px;
  font-size: 24px;
}

input[type=text] {
  border-color: #808080;
  background-color: #fff;
  width: 100%;
  -webkit-border-radius: 5px;
  padding: 5px;
  box-sizing: border-box; /* added */
}

input[type=submit] {
  margin-left: 5px;
  padding: 5px;
  background: #ccc;
  cursor: pointer;
  -webkit-border-radius: 5px;
  border: 1px solid;
  background-color: DodgerBlue;
  border-color: #CCCCCC;
  color: #fff;
}

<form autocomplete="off" action="/action_page.php">
  <div class="autocomplete" style="width:300px;">
    <input id="myInput" type="text" name="myCountry" placeholder="Country">
  </div>
  <input type="submit">
</form>

您可以在此处查看更多示例：

【讨论】：

按照您的建议进行操作，当我将文本大小增加到 120% 时，它仍然会覆盖提交按钮
为什么要增加到大于 100%？您为父元素设置了固定宽度
我希望能够根据需要进行调整，所以想知道如何。
看到当你说 120% 宽度时，它是其父级宽度的 120%，因此溢出父级 div.autocomplete :) 你的代码的问题是你在说width: 100% 和 padding 连同它一起增加了这个 100% 的宽度......
我听到了。所以在我的例子中，这是否意味着字段自动构成父级的 300px，我不应该使用它？

【解决方案2】：

您是否尝试在输入文本和提交按钮之间使用&nbsp;？

.autocomplete {
  position: relative;
  display: inline-block;
}

input {
  border: 1px solid;
  padding: 5px;
  font-size: 24px;
}

input[type=text] {
  border-color: #808080;
  background-color: #fff;
  width: 100%;
  -webkit-border-radius: 5px;
  padding: 5px;
}

input[type=submit] {
  margin-left: 5px;
  padding: 5px;
  background: #ccc;
  cursor: pointer;
  -webkit-border-radius: 5px;
  border: 1px solid;
  background-color: DodgerBlue;
  border-color: #CCCCCC;
  color: #fff;
}

<form autocomplete="off" action="/action_page.php"> 
  <div class="autocomplete" style="width:300px;"> 
    <input id="myInput" type="text" name="myCountry" placeholder="Country">   
    </div>&nbsp;&nbsp;&nbsp;
<input type="submit"> 
</form>

【讨论】：

【解决方案3】：

您可以在input[type=submit] {} 中增加margin-left 的值，如下所示：

input[type=submit] {
  margin-left: 10px; /* increased value */
  padding: 5px;
  background: #ccc;
  cursor: pointer;
  -webkit-border-radius: 5px;
  border: 1px solid;
  background-color: DodgerBlue;
  border-color: #CCCCCC;
  color: #fff;
}

或在前一个元素的右边添加边距，如下所示：

input[type=text] {
  border-color: #808080;
  background-color: #fff;
  width: 100%;
  -webkit-border-radius: 5px;
  padding: 5px;
  margin-right: 5px; /* add margin right */
}

【讨论】：