标签左对齐

Question

我这里有一个简单的html布局（在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;
}

但它们并没有左对齐，我错在哪里了？

---更新--

我的意思是value1和value22222 左对齐，而name1和name2222左对齐。您可以从我的jsfiddle链接中看到，当前value1和value22222没有处于相同的左对齐级别。我需要像这样:

Name1:        value1
Name22222:    value22222

- Mellon

---

声明变量： - sandeep

Answer 1

我看到的所有东西都是左对齐的。

你是否想要让所有内容都在同一行上？

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

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

这里是 jsfiddle

根据你对问题的编辑...唯一实现这个的方式就是给 .name 类设置一个宽度，如果没有设定宽度，.value 就会紧挨在 .name 的左侧，它们在垂直方向上也不会对齐到左侧。

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

当然，为 .name 标签设置宽度存在问题，因为假设 .name 内容长度不同。你可以设置宽度，然后添加文本溢出选项来防止布局破坏......

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

- Scott

Answer 2

做这个

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

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

- Sonal Khunt

---

人们必须停止毫无意义地认为!important可以解决所有问题。这样行不通。 - BoltClock