如何让输入内联显示？

我似乎无法弄清楚如何以{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++; 
    } 
}

来源

2014-10-09 JEA

输入是inline-block通过默认的，所以如果有空间它们将显示内联的，如果不是他们将换到下一行。无论是确保包含元素的宽度足以容纳你的输入或尝试：

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

停止从包装的投入，注意，这种风格应用到div不的投入，你实际上可能要删除display:inline;。

来源

2014-10-10 00:53:00

谢谢。是的 - 我删除了显示：内联，它工作。这里是我添加了我需要的内容：newdiv.setAttribute（“style”，“width：900px; white-space：nowrap;”）; – JEA 2014-10-10 05:57:41

如果我得到你的权利，那么你要一个按钮被点击时显示两个文本框...

你可以把它非常简单，取文件撰写命令。

例如

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

<script> 
function makeSmth() { 

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

来源

2014-10-09 21:52:34 herzDev

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

来源

2014-10-09 23:48:01 Saeid

如何让输入内联显示？

回答

相关问题