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

当我尝试这个时，第三个按钮转到第二行，但是向右移动我尝试将内联块添加到保证金：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页面中包含id为box的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);    
}

将三个div中的三个按钮居中放在同一行上

2 个答案: