Html 标签左对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8488237/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
label left align
提问by Mellon
I have a simple html layout here (in jsfiddle):
我在这里有一个简单的 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>
I would like to left align the names & values, so I did the following CSS:
我想左对齐名称和值，所以我做了以下 CSS：
.name{
font-weight: bold;
text-align: left;
}
.value{
text-align:left;
}
But they are not left aligned, where am I wrong?
但他们没有左对齐，我哪里错了？
---update--
- -更新 -
I mean value1and value22222left alignwhile name1and name2222left algin. You can see from my jsfiddlelink that value1and value22222are not at the same left align level currently. I need it like this:
我的意思是value1和value22222左对齐，而name1与name2222左褐藻胶。您可以从我的jsfiddle链接中看到value1和value22222当前不在相同的左对齐级别。我需要这样：
Name1: value1
Name22222: value22222
回答by Scott
Everything looks left aligned to me.
一切看起来都与我对齐。
Do you, by chance mean you want everything on one line?
你，偶然的意思是你想要一条线上的所有东西吗？
.name{
font-weight: bold;
text-align: left;
float: left;
}
.value{
text-align:left;
float:left;
}
Based on your edit to the question.... the only way to accomplish that is to have a width for the .name class. Without a set width, .value will alway fall immediately to the left of .name and vertically, they will not align to the left.
根据您对问题的编辑......实现这一目标的唯一方法是为 .name 类设置宽度。如果没有设置宽度， .value 将始终立即落在 .name 的左侧，并且在垂直方向上，它们不会向左对齐。
.name{
font-weight: bold;
text-align: left;
display: inline-block;
width:100px;}
Of course, setting a width for the .name label present a problem since it's assumed the .name content will be different lengths. You could set a width then add a text overflow option to prevent layout breaking.....
当然，设置 .name 标签的宽度存在问题，因为它假定 .name 内容的长度不同。您可以设置宽度然后添加文本溢出选项以防止布局中断.....
.name{
font-weight: bold;
text-align: left;
display: inline-block;
width:50px;
white-space: nowrap;
text-overflow: ellipsis;}
回答by Sonal Khunt
do this
做这个
.name{
font-weight: bold;
text-align: left;
float:left;
}
.value{
text-align:left;
float:left;
}
