为值的css格式化

我试图调整值。该代码是，为值的css格式化

<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

感谢。

来源

2011-09-11 Ajay

CSS：

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

PHP代码：

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

...等等...

你可以用CSS3伪类的也行：

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

在这种情况下，您的PHP代码更轻：

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

...等等...

来源

2011-09-11 10:15:26 mlh

其实我不明白你想要做什么，但也许你应该使用表：

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

来源

2011-09-11 10:10:48 Olli

我还要加上第三列放置：在，这样就可以保持一致在中间：'变量1：值1'。然后与定义tds的对齐和宽度的css类进行对齐。 – j0ker

我想要的值：对齐 – Ajay

Ajay：是的，当你使用我的脚本时它们是对齐的。如果你想要：总是在相同的位置使用j0ker提供的代码。 – Olli

最好关闭使用一个表像这样：

<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/

来源

2011-09-11 10:13:36 Nayish

如果您输出键值对我会使用一个定义列表。你加价想如下：

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

来源

2011-09-11 11:22:22

为值的css格式化

回答

相关问题