圍繞在同一行

Question

我有三個按鈕，內部的三個div的三個div的三個按鈕，我需要他們中心在同一行。
它們是用createElement（）方法創建的。按鈕和Div。
這是我知道在函數或腳本標記或if-else語句中創建按鈕的唯一方法。或者至少是唯一對我有用的方法。 ^^;
我敢打賭，視覺會幫助這一點。

function threeGameButtons() 
{ 
    buttonDiv = createElement("div"); 
    buttonDiv = setAttribute("center"); 
    //This^has been to center the divs, and has done so by putting them on 
    //top of each other. I believe I understand why though. 
    gameButton = document.createElement("BUTTON"); 
    gameText = document.createTextNode("text"); 
    gameButton = appendChild(gameText); 
    buttonDiv.id = "buttonID"; 
    gameButton.onclick = myFunction; 
    //calls a function for the game 
    buttonDiv.appendChild(gameButton); 
    document.body.appendChild(buttonDiv); 

    //two more buttons 
} 

所以像這樣做的三個按鈕在遊戲中早些時候被調用。 （我不認爲我提到過，但現在可能很明顯：這是針對遊戲的）。
我很想只是做一個div容器和中鋒是什麼，但我完全不知道該怎麼辦所以在這樣的函數創建的div時。
我試過一些CSS來居中div和按鈕。哦，我試過了。但我的努力沒有結果。我可以給你所有的東西，但我不得不回想起我嘗試過的所有CSS方法。
一個我雖然試過：

#buttonID2 (Second and center button) 
{ 
    margin:0 auto; 
} 
#buttonID (First and left button) 
{ 
    display:inline-block; 
    position:absolute; 
    left:200px; 
} 
#buttonID3 (Third and right Button) 
{ 
    display:inline-block; 
    position:absolute; 
    right:200px; 
} 

當我嘗試這一點，第三個按鈕進入到第二線，但去的權利。
我試着添加內聯塊到邊距：0 auto;並停止第二個按鈕的居中。
其他兩個仍然在中心的左側和右側。
我的意圖並不是真的讓他們走到那麼遠的左邊和右邊，但現在，我只是不希望他們重疊中間按鈕。

的說明;所有這些都發生在調用它們的函數發生的頁面上。我不確定這是否有所作爲。但是我認爲我會把它扔進去，以防萬一。

Answer 1

所以要添加三個按鈕的DIV標籤內，內聯。如果我理解你的問題正確，我認爲這是你在找什麼：

function threeGamesButton() { 

var x =document.getElementById("box"); 

var btnSet = document.createElement("div"); 
btnSet.setAttribute("style","border: 1px solid black; width:800; height:300;") 

var firstButton = document.createElement("button"); 
firstButton.setAttribute("style","border: 1px solid black; width:200; height:250;"); 
firstButton.setAttribute("onClick","myFunction1()"); 
firstButton.innerText ="Button 1"; 

var secondButton = document.createElement("button"); 
secondButton.setAttribute("style", "border: 1px solid black; width:200; height:250;"); 
secondButton.setAttribute("onClick","myFunction2()"); 
secondButton.innerText ="Button 2"; 

var thirdButton = document.createElement("button"); 
thirdButton.setAttribute("style", "border: 1px solid black; width:200; height:250;") 
secondButton.setAttribute("onClick","myFunction3()"); 
thirdButton.innerText ="Button 1"; 

btnSet.appendChild(firstButton); 
btnSet.appendChild(secondButton); 
btnSet.appendChild(thirdButton); 

x.appendChild(btnSet); 
} 

在你的HTML頁面包括DIV其中有ID名爲框。而從任何where..Rather比設定（樣式）一個屬性的功能，你可以使用

firstButton.className = "firstButton" 

，然後添加CSS部分該名稱。但如果裏面按鈕的總寬度比您插入所有這些按鈕的div標籤較大，那麼最後一個按鈕將通過自動將第二胎......

Answer 2

所以我想通了這一點對我自己，對任何需要它的人。
我在JSFiddle。
但對於按鈕的代碼的部分是這樣的（忽略奇函數名）：

function continueIntro() 
{ 
    document.body.innerHTML = ''; 
    var continueParagraph = document.createElement("p"); 
    continueParagraph.innerHTML = "<center>These are the buttons I finally got <br>" + 
    "to center on the same line: </center>"; 
    document.body.appendChild(continueParagraph); 

     getGoldButtons();  
} 

function getGoldButtons() 
{ 
    buttonDiv2 = document.createElement("div"); 
    buttonDiv2.setAttribute("align","center"); 

    gameButton2=document.createElement("BUTTON"); 
    gameText2=document.createTextNode("First Option"); 
    gameButton2.appendChild(gameText2); 
    buttonDiv2.id = "buttonDiv2"; 
    gameButton2.onclick = caveGetGold; 
    buttonDiv2.appendChild(gameButton2); 

    gameButton3=document.createElement("BUTTON"); 
    gameText3=document.createTextNode("Second Option"); 
    gameButton3.appendChild(gameText3); 
    gameButton3.onclick = forestGetGold; 
    buttonDiv2.appendChild(gameButton3); 

    gameButton4=document.createElement("BUTTON"); 
    gameText4=document.createTextNode("Third Option"); 
    gameButton4.appendChild(gameText4); 
    gameButton4.onclick = tunnelGetGold; 
    buttonDiv2.appendChild(gameButton4); 
    document.body.appendChild(buttonDiv2);  
}