爲值的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格式化

回答

相關問題