標籤左對齊

Question

我這裏有一個簡單的HTML佈局（in jsfiddle）：

<ul> 
    <li> 
     <label class="name">Name1:</label> 
     <label class="value">value1</label> 
    </li> 
    <li> 
     <label class="name">Name22222:</label> 
     <label class="value">value22222</label> 
    </li> 
</ul> 

我想左對齊名&值，所以我做了以下CSS：

.name{ 
    font-weight: bold; 
    text-align: left; 
} 

.value{ 
    text-align:left; 
} 

但他們不是左對齊的，我錯在哪裏？

--- update--

我的意思是value1和value22222左對齊而name1和name2222離開褐藻膠。您可以從我的jsfiddle鏈接看到，value1和value22222目前不在同一個左對齊級別。我需要這樣的：

Name1:  value1 
Name22222: value22222 

Answer 1

一切看起來左對齊給我。

你是否偶然意味着你想要一條線上的一切？

.name{ 
font-weight: bold; 
text-align: left; 
float: left; 
} 

.value{ 
text-align:left; 
float:left; 
} 

jsfiddle here

根據您的編輯的問題....來實現這一目標的唯一途徑是擁有的。名稱類的寬度。如果沒有設置寬度，.value將一直下降到.name的左側並且垂直，它們將不會與左側對齊。

.name{ 
font-weight: bold; 
text-align: left; 
display: inline-block; 
width:100px;} 

當然，設置所述。名稱標籤的寬度呈現出的問題，因爲它是假設。名稱內容將是不同的長度。您可以設置寬度，然後添加一個文本溢出選項，以防止破布局.....

.name{ 
font-weight: bold; 
text-align: left; 
display: inline-block; 
width:50px; 
white-space: nowrap; 
text-overflow: ellipsis;} 

Answer 2

做到這一點

.name{ 
    font-weight: bold; 
    text-align: left; 
    float:left; 
} 

.value{ 
    text-align:left; 
    float:left; 
}