javascript - 在同一行的三个 div 中将三个按钮居中

Question

我有三个按钮，在三个 div 中，我需要将它们居中放置在同一行上。
它们是使用 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 时这样做。
我已经尝试了一些 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;
}

当我尝试这个时，第三个按钮转到第二行，但转到右边。
我试过将 inline-block 添加到 margin: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 页面中包含一个名为 box 的 div。并从任何地方调用该函数..而不是为(样式)设置属性，您可以使用

firstButton.className = "firstButton" 

然后为该名称添加 css 部分。但是如果内部按钮的总宽度大于插入所有这些按钮的 div 标签，那么最后一个按钮将自动传递给第二个原始按钮......