Javascript appendChild()

Question

嘿，我正在尝试appendChild()两个连续的div，但我期望的结果是它们并排在一起，但它们一个在另一个之上，如下所示：

1st div
2nd div

而不是第一个div第二个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);

Answer 1

默认情况下，<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后面添加了可选的分隔符分号。

Answer 2

如果您希望元素以内联方式布局，而不是作为单独的块布局，则使用<span>可能比使用<div>获得更好的结果。

Answer 3

您还可以将"float: left“CSS属性添加到DIVs，这将导致它们在左侧并排堆叠，直到它们填满封闭元素的可用宽度。