Question

我似乎无法弄清楚如何将以下代码中的两个输入显示为{display: inline}格式，以便它们彼此相邻而不是分开显示。我查看了其他帖子并尝试了jQuery，<style>标记，.setAttribute等，以尝试添加此CSS样式。

我还尝试在CSS中使用必需的display: inline命令在HTML中创建一个类。我创建此功能，一旦点击我的主页上的按钮就打开。一切正常，我只想让两个输入（文本和按钮）排列在一起。

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

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

Answer 1

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

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

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

Answer 2

为每个输入元素使用 style =＆＃39; float：left;＆＃39;

<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>

Answer 3

如果我说得对，那么当你点击按钮时你想显示两个文本框......

您可以非常简单地使用document.write命令。

e.g。

<body>
<input type="button" value="Click me" onClick="makeSmth()"></input>
</body>

<script>
function makeSmth() {

    document.write("<br><input type='text' id='textBox01'></input>");
}
</script>

Answer 4

我认为此链接可能是 handy

在这种情况下，它们从form标记解析，并创建了一个CSS类：

.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
}

如何使输入显示为内联？

4 个答案: