如何使输入以内联方式显示

How can I make inputs display inline?

本文关键字：方式 显示 何使 输入      更新时间：2023-09-26

我似乎不知道如何将以下代码中的两个输入显示为{display: inline}格式，以便它们并排显示，而不是单独显示。我看过其他帖子，并尝试过jQuery、<style>标签、.setAttribute等，以便尝试添加这种CSS样式。

我还尝试在HTML中创建一个类，在CSS中使用必要的display: inline命令。我创建这个功能是为了在点击主页上的按钮后打开。一切都很好，我只希望两个输入（文本和按钮）并排排列。

你知道我哪里错了吗？我是个初学者。

var counter = 1;
var limit = 2;
var newdiv = document.createElement('div');
function addInput(divName){
     if (counter == limit)  {
          (counter);
     }
     else {
          nFilter.className = 'input';
          newdiv.setAttribute("style", "display: inline;");
          newdiv.innerHTML = "<br><input type='text' placeholder='Postal Code' name='myInputs[]'> " + " <input type='button' value='Lets Go!' onclick='url(file:///C:/Users/Joy/Documents/ZapList/HoldingPage.php)'>";
          document.getElementById(divName).appendChild(newdiv).span;
          counter++; 
     }
}

默认情况下，输入为inline-block，因此如果有空格，它们将内联显示，如果没有空格，它们会换行到下一行。请确保包含的元素足够宽，可以容纳您的输入，或者尝试：

newdiv.setAttribute("style", "display: inline;white-space:nowrap;");

要阻止输入换行，请注意，此样式应用于div而不是输入，您可能实际上想要删除display:inline;。

仅使用style='float:left；'对于每个输入元素

<html>
  <head>
    <title>this is a test</title>
    <meta content="">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    </head>
    <body>
      <div id="a"></div>
      <script type="text/javascript">
    var counter = 1;
    var limit = 2;
    var newdiv = document.createElement('div');
    function addInput(divName){
    if (counter != limit)  {
        newdiv.innerHTML = "<br><input type='text' placeholder='Postal Code' name='myInputs[]' style='float:left;'> " + " <input type='button' style='float:left;' value='Lets Go!' onclick='url(file:///C:/Users/Joy/Documents/ZapList/HoldingPage.php)'>";
        document.getElementById(divName).appendChild(newdiv);
        counter++; 
    }
    }
    addInput("a");
      </script>

    </body>
  </html>

如果我说得对，那么当单击按钮时，您希望显示两个文本框。。。

你可以让它变得非常简单，并使用document.write命令。

例如

<body>
<input type="button" value="Click me" onClick="makeSmth()"></input>
</body>
<script>
function makeSmth() {
    document.write("<br><input type='text' id='textBox01'></input>");
}
</script>

我认为这个链接可能是方便的

在这种情况下，他们从form标签解析，并创建一个css类：

.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
}
相关文章：