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>

我想留下名字＆amp;值，所以我做了以下CSS：

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

.value{
    text-align:left;
}

但他们没有左对齐，我错在哪里？

---更新 -

我的意思是value1和value22222 左对齐，而name1和name2222留下了algin。您可以在我的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

根据您对问题的编辑....实现此目的的唯一方法是为.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;}

Answer 2

这样做

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

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

标签左对齐

2 个答案: