Question

I have a simple html layout here (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>

I would like to left align the names & values, so I did the following 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 value1 and value22222 left align while name1 and name2222 left algin. You can see from my jsfiddle link that value1 and value22222 are not at the same left align level currently. I need it like this:

Name1:        value1
Name22222:    value22222

Answer 1

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

jsfiddle here

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{
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{
font-weight: bold;
text-align: left;
display: inline-block;
width:50px;
white-space: nowrap;
text-overflow: ellipsis;}