如何在单击按钮时水平添加输入框

在单击按钮时水平添加输入框，可以通过以下步骤实现：

HTML布局：首先，在HTML中创建一个包含按钮和输入框的容器元素，如<div id="container"></div>。在CSS中设置容器元素的样式为display: flex;，这样可以使其内部元素水平排列。
JavaScript事件处理：使用JavaScript来监听按钮的点击事件。可以通过getElementById()或其他方式获取按钮元素，并添加click事件监听器。
动态添加输入框：在按钮的点击事件处理函数中，使用JavaScript创建一个新的输入框元素，可以使用document.createElement()方法来创建一个<input>元素。设置输入框的相关属性，如type、name、placeholder等。然后将输入框元素添加到容器元素中，可以使用appendChild()方法将新创建的输入框元素添加到容器元素的子节点列表中。

下面是一个示例的实现代码：

HTML:

<div id="container">
  <input type="text" name="input1" placeholder="输入框1">
</div>
<button id="addButton">添加输入框</button>

JavaScript:

var container = document.getElementById("container");
var addButton = document.getElementById("addButton");

addButton.addEventListener("click", function() {
  var newInput = document.createElement("input");
  newInput.type = "text";
  newInput.name = "input" + (container.children.length + 1);
  newInput.placeholder = "输入框" + (container.children.length + 1);
  
  container.appendChild(newInput);
});

这样，每次点击按钮时，就会在容器元素中水平添加一个新的输入框。可以根据需要调整样式和添加其他功能。