标签左对齐

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