2つの別々のブロックに名前と値を表示

Question

2行目の 'Place'の下に 'Rome'という文字が表示されていますが、どうすればそれを防ぐことができますか？

http://jsfiddle.net/JqxTx/21/

おかげで、 クリス。

Answer 1

ようなスタイルは、あなたが、hanging line indentまたはCSS3 columnsで行くことができるのいずれかこのシナリオで役立つかどうかについていくつか調査しなければなりません。

それは簡単です、それが動作し、冗長コードのビットがありますが、それはネストを促進しないと、それは混乱の大きなではありませんので、私は通常、古いスタイル

<table> 
    <tr> 
     <td><label>Label</label></td> 
     <td><span>Text</span></td> 
    </tr> 
</table> 

で行きます。 私はまだ、このレイアウトスキームの代わりに良い、単純な等価のCSSの置換を参照してください。 最良のものは、おそらく

<label style="float: left; width: 20%;">Label</label> 
<span style="float: left; width: 80%;">Text</span> 

または

<label style="position: absolute; width: 20%;">Label</label> 
<span style="display:block; padding-left: 20%;">Text</span> 

のいずれかであるあなたは、おそらくhere以上またはthe answer to this question中に見つけることができます。 しかし、彼らは最初の列の内容に適応していないので、テーブルほど良くありません。

<label style="float:left; height: 2em;">Label</label> 
<span>Text</span> 

または

<label style="display:block; float:left;">Label</label> 
<span style="display:block; float:left; width:90%;">Text</span> 

作品のようなハックが、彼らの両方が特定の画面サイズに依存しているので、私は彼らをお勧めしません。

G'luck。

Answer 2

あなたを、私は、このようなpなどのブロック要素にspanを変更しますし、次に後者についてものの

div label { 
    float: left; 
} 
div p { 
    margin-left: 40px;  
} 

• DEMO

Answer 3

http://jsfiddle.net/paislee/JqxTx/22/ 私は2つのブロックにしたので、これがうまくいくと思います。

Answer 4

だけでテーブルを使用します。

<table><tr valign=top><td>Place <td>Rome Rome ... Rome</table> 

あなたも、いくつかの名前/値のペアを有していてもよく、その後、彼らは優れたテーブルを作ります。