ボタンとテクスチャのセットを整列する

Question

私はテクスチャの上にシリーズのボタンがある小さなウェブサイトを書いています。私はプレゼンテーションを整理したいと思います。特にボタンをテキストエリアに合わせたいと思います。

はこれまでのところ、私のHTMLは次のとおりです。私は右と左の余白に並ぶようにボタンとテキスト領域のすべてが好き、そして右浮かべなければ/リセットボタンを提出する

<form action='/submit', method="GET"> 
    <td><INPUT TYPE=button onmousedown="myFunction()" value="Button1"></td> 
    <td><INPUT TYPE=button onmousedown="myFunction()" value="Button2"></td> 
    <td><INPUT TYPE=button onmousedown="myFunction()" value="Button3"></td> 
    <td><INPUT TYPE=button onmousedown="myFunction()" value="Button4"></td> 
    <td><INPUT TYPE=SUBMIT name="submit" value="Submit" style="float: right"></td> 
    <td><INPUT TYPE=Reset name="reset" value="Reset" style="float: right"></td> 
    <Textarea id="ta" name="package" ROWS=100 COLS=111>{{package['text']}}</textareaa> 
</form> 

。

私は私が好きなものの迅速な描画を含めました：

Answer 1

.form{ 
 
    height : 250px; 
 
    Width : 250px; 
 
} 
 
.form :nth-child(6){ 
 
    float:right; 
 
} 
 
.btn{ 
 
    display:inline-block; 
 
    width : 23%; 
 
    height : 25px; 
 
    background-color : lightgray; 
 
    border : 1px solid black; 
 
} 
 

 
.textarea{ 
 
    width : 100%; 
 
    height:200px; 
 
    background-color : darkgray; 
 
    border : 1px solid black; 
 
}

<div class="form"> 
 
    <div class="btn"></div> 
 
    <div class="btn"></div> 
 
    <div class="btn"></div> 
 
    <div class="btn"></div> 
 
    <div class="btn"></div> 
 
    <div class="btn"></div> 
 
    <div class="textarea"></div> 
 
</div>

Answer 2

私は右と左マージンを想定していますが同じ幅です。その場合、div内のコンテンツ全体をラップし、CSSスタイル、display：inline-blockおよびtext-align：centerを設定します。これはdivを中央（水平方向）に揃えます。これに応じて幅のサイズを設定します（幅を80％に設定すると、同様に左に10％のスペースが残ります）

浮動小数点数を使用して左または右の位置を設定しますそれに応じてボタンを押します。