的Javascript使用appendChild（）

嘿我試圖使用appendChild（）兩個連續div的，但是我所期待的結果是他們並排，但他們都在另一個之上，像這樣：的Javascript使用appendChild（）

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

來源

2011-01-31 Twidizle

如何顯示一些實際的代碼？我們不是（非常）通靈。 – 2011-01-31 02:55:20

@Matt真棒頭像！ – ClosureCowboy 2011-01-31 03:02:24

默認情況下，<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後面添加了可選分隔符分號。

來源

2011-01-31 03:01:44 ClosureCowboy

如果您希望將元素內聯佈置而不是單獨的塊，則使用<span>而不是<div>可能會獲得更好的結果。

來源

2011-01-31 03:02:52

您還可以將「float：left」CSS屬性添加到DIV，這會導致它們在左側並排堆疊，直到它們填充了封閉元素的可用寬度。

來源

2011-01-31 03:05:56

的Javascript使用appendChild（）

回答

相關問題