0

3 つの div 内に 3 つのボタンがあり、それらを同じ行の中央に配置する必要があります。
それらは 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
}

このように作成された 3 つのボタンは、ゲームの早い段階で関数で呼び出されます。（私は言及していないと思いますが、おそらく今では明らかです。これはゲーム用です）。
コンテナ 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;
}

これを試してみると、3番目のボタンが2行目に移動しますが、右に移動します。
そして、inline-block を margin:0 auto; に追加しようとしました。2番目のボタンが中央に配置されなくなります。
ただし、他の 2 つはまだ中央の左右に移動します。
私の意図は、それらを左右に大きくすることではありませんが、今のところ、中央のボタンに重ならないようにします.

メモ; これらはすべて、それらを呼び出す関数が発生するページで発生します。それが違いを生むかどうかはわかりません。もしそうなら、私はそれを投げ入れると思いました。

4

2 に答える 2

0

したがって、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 タグよりも大きい場合、最後のボタンは 2 番目の raw に自動的に渡されます...

于 2013-10-24T13:34:28.223 に答える
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 に答える