Text not aligned

I created the following HTML CSS Code:

<div class="Pager">
  <span class="Resume">Posts 1 to 40 of 220X</span>
  <ul class="Buttons">
    <li><span>123</span></li>
  </ul>
  <div class="Clear"></div>
</div>

.Class {clear: both;}

div.Pager {}

div.Pager span.Resume {
  font-family: Arial;
  font-size: 0.9em;
  line-height: 1;
  float: left;
}

div.Pager ul.Buttons {
  float: left;    
}

div.Pager ul.Buttons li {
  float: left;   
}

div.Pager ul.Buttons li span {
  font-family: Arial;
  font-size: 0.9em;
  line-height: 1;
}

Does anyone knows why the "123" text开发者_如何学JAVA appears lower then the previous text?

Thank You, Miguel

---

Move your "font style setting CSS" to the outermost element (div.Pager), and have it only on that element so you're not needlessly redefining the same thing:

http://jsfiddle.net/thirtydot/85AKq/9/

This works because font-family, font-size, line-height are all inheritable - the descendants can inherit those properties from the parent element.

---

I'm pretty sure this is irrelevant, but to make it work when "Normalized CSS" is turned off in jsFiddle, add margin: 0; padding: 0; list-style: none to your ul:

http://jsfiddle.net/thirtydot/85AKq/10/

---

Changing the line-height to normal on both the spans worked for me

div.Pager span.Resume {
    float: left;
    font-family: Arial;
    font-size: 0.9em;
    line-height: normal;
}

div.Pager ul.Buttons li span {
    font-family: Arial;
    font-size: 0.9em;
    line-height: normal;
}

As well as changing the li and ul to remove the dot and the spacing fixed it completely.

div.Pager ul.Buttons li {
    float: left;
    list-style:none;
    padding:0;
    margin:0;
}

div.Pager ul.Buttons {
    float: left;
    list-style:none;
    padding:0;
    margin:0;
}

---

It's because the text is inside an unordered list. Lists have automatic margin properties that are determined by the browser. In order to get it to go up to the same level you're going to have to offset it's position to the top by giving the list a margin-top: -3px style like so:

http://jsfiddle.net/hnYUR/