javascript - 如何使输入内联显示？

Question

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

我还尝试使用必要的 display: inline 在 HTML 中创建一个类CSS 中的命令。我创建此功能是为了在单击主页上的按钮后打开它。一切正常，我只希望两个输入(文本和按钮)彼此相邻排列。

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

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