같은 줄에 세 개의 div에 세 개의 버튼 중앙에 넣기

Question

3 개의 div 안에 3 개의 버튼이 있으며 같은 선에 가운데에 맞춰야합니다.
이들은 createElement() 메소드로 작성되었습니다. 버튼과 사업부.
함수 또는 스크립트 태그 또는 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에서 함수를 만들 때 그렇게하는 방법을 완전히 알지 못합니다.
그리고 div와 단추를 가운데 맞추기 위해 일부 CSS를 시도했습니다. 오, 나는 노력했다. 하지만 내 노력은 효과가 없었습니다. 나는 모든 것을 제공 할 수는 있지만, 내가 시도한 모든 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 태그 인라인에 3 개의 버튼을 추가하려고합니다. 귀하의 질문을 올바르게 이해하면 이것이 귀하가 찾고있는 것이라고 생각합니다 :

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 페이지에 상자라는 ID가있는 div를 포함하고 있습니다. 그리고 어디서든지 함수를 호출 할 수 있습니다. (스타일)에 대한 속성을 설정하는 대신

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