Javascript appendChild()

嘿我试图appendChild()两个连续的div,但我期待的结果是他们并排,但他们是一个在另一个之上像这样:
1st div
2nd div
而不是1st div 2nd div
var addBudContainer = document.createElement("div");
addBudContainer.id = "addBudContainer";

var addBudBtn = document.createElement("div");
addBudBtn.className = "addBud";

var addBudBtnName = document.createElement("a");
addBudBtnName.className = "btn-addBud";
addBudBtnName.setAttribute("href","#");

addBudBtn.appendChild(addBudBtnName);

var addBudTxt = document.createElement("input");
addBudTxt.id="addBudTxt";
addBudTxt.type="text";
addBudTxt.defaultValue="Enter buddy name";
//txt box effects   
addBudTxt.onfocus = function(){if(replyTxt.value==replyTxt.defaultValue) replyTxt.value='';};
addBudTxt.onblur= function(){if(replyTxt.value=='') replyTxt.value=replyTxt.defaultValue;};

addBudContainer.appendChild(addBudBtn);
addBudContainer.appendChild(addBudTxt);
    
已邀请:
如果您希望元素在线布局而不是单独的块,则可以使用
<span>
而不是
<div>
获得更好的结果。     
默认情况下,
<div>
元素是“块”元素。简单来说,这意味着
<div>
将在其父元素内的自己的行(或行)上。 默认情况下,
<span>
元素是“内联”,这可能是您想要使用的。内联元素不会将其兄弟元素推送到其他行。 如果要覆盖此行为,可以使用CSS。
/* This assumes the parent element of your divs has 'some_class' as its class */
.some_class > div {
  display: inline;
}
编辑:我在
display: inline
之后添加了可选的分隔符分号。     
您还可以将“float:left”CSS属性添加到DIV,这将使它们在左侧并排堆叠,直到它们填满封闭元素的可用宽度。     

要回复问题请先登录注册