値のCSS書式設定

Question

値を整列しようとしています。コードは、おかげで私は

Variable1 :  Value1 
Variable2 :  Value2 

、値は次のように適切に整列させたい、

<section class="message success"> 
     Variable1: Value1<br/> 
     Variable2 : Value2<br/> 
</section> 

.message.success { 
border: 1px solid #b8c97b; 
background-color: #e5edc4; 
background-image: -o-linear-gradient(top, #e5edc4, #d9e4ac); 
background-image: -ms-linear-gradient(top, #e5edc4, #d9e4ac); 
background-image: -moz-linear-gradient(top, #e5edc4, #d9e4ac); 
background-image: -webkit-gradient(linear, left top, left bottom, from(#e5edc4), to(#d9e4ac)); 
background-image: -webkit-linear-gradient(top, #e5edc4, #d9e4ac); 
background-image: linear-gradient(top, #e5edc4, #d9e4ac); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5edc4', endColorstr='#d9e4ac'); 
color: #3f7227; 
text-shadow: 0 1px 1px #fff; 
} 

です。

Answer 1

CSS：

.variable { margin-right : 40px; display: inline-block; width: 120px; } 
.value { margin-left : 40px; display: inline-block; width: 120px; } 

PHPコード：

span { display: inline-block; width: 120px; } 
span:nth-child(odd) { margin-right : 40px;} 
span:nth-child(even) { margin-left : 40px;} 

：またとしてCSS3の擬似クラスを操作することができ

echo '<span class="variable">'.$variable1.'</span>:<span class="value">'.$value1.'</span><br />'; 
echo '<span class="variable">'.$variable1.'</span>:<span class="value">'.$value1.'</span><br />'; 

...のように...

その場合、あなたのPHPコードは軽いです：

echo '<span>'.$variable1.'</span>:<span>'.$value1.'</span><br />'; 
echo '<span>'.$variable2.'</span>:<span>'.$value2.'</span><br />'; 

...のように...

Answer 2

実は私はあなたがやりたいと思っているのか理解することはできませんが、多分あなたは、テーブルを使用する必要があります。

ようにテーブルを使用してオフベスト

<table border="0"> 
<tr><td>Variable1:</td> <td>Value1</td></tr> 
<tr><td>Variable2:</td> <td>Value2</td></tr> 
</table> 

Answer 3

：

<table class="message success"> 
    <tr> 
     <td class="var">Variable1</td> 
     <td class="sem">:</td> 
     <td class="val">Value1</td> 
    </tr> 
    <tr> 
     <td class="var">Variable2</td> 
     <td class="sem">:</td> 
     <td class="val">Value2</td> 
    </tr> 
</table> 

と、あなたは、CSSをすることができます使用してように揃える：http://jsfiddle.net/nayish/uenzN/2/

：

.val {width:100px;} 
.sem {width:40px;} 
.var {width:100px;} 

は、実際の例を参照してください。

Answer 4

あなたは、キーと値のペアを出力している場合、私は定義リストを使用すると思います。次のようにあなたのマークアップは、希望：

<dl> 
    <dt>Variable 1</dt> <dd>Value 1</dd> 
    <dt>Variable 2</dt> <dd>Value 2</dd> 
</dl> 

あなたは、このリストのスタイルをCSSを使用することができます。

dt { 
    display: block; 
    float: left; 
    clear: left; 
} 
dd { 
    margin-left: 5em; /* this will line up the values */ 
} 
dd:before { 
    content: ':'; 
}