0

我有三个按钮，在三个 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; 它会阻止第二个按钮居中。
不过，另外两个仍然在中心的左右。
我的意图并不是让它们向左和向右走那么远，但就目前而言，我只是不希望它们与中间按钮重叠。

一张纸条; 所有这些都发生在调用它们的函数发生的页面上。我不确定这是否有所作为。我想我会把它扔进去，以防万一。

4

2 回答 2

0

所以我自己想出了这个，对于任何需要它的人。
我在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);    
}
于 2013-10-25T22:09:08.047 回答
0

所以你想在一个 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 叫做 box。并从任何地方调用该函数..而不是为（样式）设置属性，您可以使用

firstButton.className = "firstButton"

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

于 2013-10-24T13:34:28.223 回答