php - 值的CSS格式

Question

我正在努力调整值(value)观。代码是，

<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;
}

我希望值像这样正确对齐，

Variable1    :     Value1
Variable2    :     Value2

谢谢。

Answer 1

最好这样使用表格:

<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 你可以这样对齐:

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

查看实例:http://jsfiddle.net/nayish/uenzN/2/