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

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

javascript jquery html css

Javascript 如何使输入以内联方式显示？,javascript,jquery,html,css,innerhtml,Javascript,Jquery,Html,Css,Innerhtml,我似乎不知道如何在下面的代码中将这两个输入显示为{display:inline}格式，以便它们彼此相邻，而不是在单独的行上。我看过其他帖子，并尝试了jQuery、标记、.setAttribute等，以尝试添加这种CSS样式我还尝试使用CSS中必需的display:inline命令在HTML中创建一个类。我创建此功能是为了在单击主页上的按钮后打开。一切正常，我只想让两个输入（文本和按钮）排成一行你知道我哪里出了问题吗？我是初学者 var counter = 1; var limit = 2;

我似乎不知道如何在下面的代码中将这两个输入显示为

{display:inline}

格式，以便它们彼此相邻，而不是在单独的行上。我看过其他帖子，并尝试了jQuery、

标记、

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

var计数器=1；
var限值=2；
var newdiv=document.createElement（'div'）；
函数addInput（divName）{
如果（计数器==限制）{
（柜台）；
}
否则{
nFilter.className='input'；
setAttribute（“样式”，“显示：内联；”）；
newdiv.innerHTML=“
”+”；
document.getElementById（divName）.appendChild（newdiv）.span；
计数器++；
}
}

如果我没弄错，那么当单击按钮时，您希望显示两个文本框

您可以使用document.write命令使其变得非常简单

e、 g


函数makeSmth（）{
文件。写（“
”）；
}

如果我没弄错，那么当单击按钮时，您希望显示两个文本框

您可以使用document.write命令使其变得非常简单

e、 g


函数makeSmth（）{
文件。写（“
”）；
}

只需使用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>


这是一个测试
var计数器=1；
var限值=2；
var newdiv=document.createElement（'div'）；
函数addInput（divName）{
如果（计数器！=限制）{
newdiv.innerHTML=“
”+”；
document.getElementById（divName）.appendChild（newdiv）；
计数器++；
}
}
额外投入（“a”）；

只需使用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>


这是一个测试
var计数器=1；
var限值=2；
var newdiv=document.createElement（'div'）；
函数addInput（divName）{
如果（计数器！=限制）{
newdiv.innerHTML=“
”+”；
document.getElementById（divName）.appendChild（newdiv）；
计数器++；
}
}
额外投入（“a”）；

默认情况下，输入是

内联块

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

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

要停止包装输入，请注意，此样式应用于

div

而不是输入，您实际上可能需要删除

display:inline
默认情况下，输入是内联块
，因此如果有空间，它们将显示内联，如果没有空间，它们将换行到下一行。请确保包含的元素足够宽以容纳您的输入，或者尝试：
newdiv.setAttribute("style", "display: inline;white-space:nowrap;");

要停止包装输入，请注意，此样式应用于div
而不是输入，您实际上可能需要删除display:inline我想这个链接可能是

在这种情况下，它们从表单
标记解析，并创建一个css类：
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
}

我认为这个链接可能是错误的

在这种情况下，它们从表单
标记解析，并创建一个css类：
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
}

谢谢是-我删除了显示：内联，它工作了。下面是我添加的用于获取所需内容的线条：newdiv.setAttribute（“style”，“width:900px；white space:nowrap；”）；谢谢是-我删除了显示：内联，它工作了。下面是我添加的用于获取所需内容的线条：newdiv.setAttribute（“style”，“width:900px；white space:nowrap；”）；