このレイアウトは、テーブルや定義済みの幅なしでも可能ですか？

Question

だから私は今このタイプのセンタリングを長い間投げています。私は中心のある点に揃えようとしていますが、その周りの要素との関係を持っています。これをもっと分かりやすくするために、このcodepenを見てみましょう：http://codepen.io/sparcut/pen/jAkkdv

このコードは、基本的に幅が親の100％、この場合は本文に設定された単純なテーブルです。次に、2つの列があり、ラベルと入力はそれぞれ右と左に揃えられています。フェラは、迅速なサンプルです：

HTMLそれはテーブルレイアウトや山車を使用するように私を傷つける

table { 
    width: 100%; 
} 

tr { 
    width: 100%; 
} 

td { 
    width: 50%; 
} 

td:first-child { 
    text-align: right; 
} 

td:last-child { 
    text-align: left; 
} 

（サスをコンパイル）

<table> 
<tr> 
    <td>Given Name:</td> 
    <td><input type="text"></td> 
</tr> 
<tr> 
    <td>Surname:</td> 
    <td><input type="text"></td> 
</tr> 
<tr> 
    <td>Street Address:</td> 
    <td><input type="text"></td> 
</tr> 
<tr> 
    <td>City:</td> 
    <td><input type="text"></td> 
</tr> 
<tr> 
    <td>Phone:</td> 
    <td><input type="text"></td> 
</tr> 

CSSが、私は考えることができません/この効果を達成する別の実行可能な方法を見つける。私はまた固定幅を持っていることを試みたが、私はそれがずっと幅広い幅を達成することができるより良いと流体を見つける。

クロスブラウザテストでこのような状況でどのような欠点があるのか​​よく分かりませんが、すべて正常に動作しているようです（下のリンクを参照）。

Cross-browser 1 - 汎用ブラウザ

Cross-browser 2 - Interenet探検+最古のオペラAvalible

Answer 1

それは私が はフィドルこの

のような最小限のスタイリングと https://jsfiddle.net/yxk09odg/

<div> 
    <div class="inline-block"> 
    Given Name:<input type="text"><br> 
Surname:<input type="text"><br> 
Street Address:<input type="text"><br> 
City:<input type="text"><br> 
Phone:<input type="text"> 
    </div> 
</div> 

を参照してくださいだと思う非常に簡単です

div{ 
    text-align:center; 

} 
.inline-block{ 
    display:inline-block; 
    text-align:right; 
} 

Answer 2

テーブルの代わりに、<form>要素を試すことができます。それは本質的に同じことを成し遂げます。テーブルを使用するのがなぜ嫌いなのかは分かりません。すべての要素を一様に表示する素晴らしい方法であるからです。私は個人的には、あなたの状況のた​​めにテーブル要素に対してform要素を使用することによるさらなる利益は見ません。

HTML form element