Текст не выровнен

Question

Я создал следующий HTML CSS-код :

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

Кто-нибудь знает, почему текст «123» появляется ниже, чем предыдущий текст?

Спасибо, Miguel

Answer 1

Переместите «CSS с настройкой стиля шрифта» к самому внешнему элементу (div.Pager), и используйте его только для этого элемента, чтобы вы не переопределяли одно и то же:

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

Это работает, потому что font-family, font-size, line-height все наследуемые - потомки могут наследовать эти свойства от родительского элемента.

---

Я почти уверен, что это не имеет значения, но чтобы заставить его работать, когда "Normalized CSS" отключен в jsFiddle, добавьте margin: 0; padding: 0; list-style: none к своему ul:

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

Answer 2

Это потому, что текст находится внутри неупорядоченного списка. Списки имеют автоматические свойства полей, которые определяются браузером. Для того, чтобы он поднялся на тот же уровень, вам нужно сместить его позицию наверх, придав списку стиль margin-top: -3px, например, так:

http://jsfiddle.net/hnYUR/

Answer 3

Изменение line-height на нормальный на обоих отрезках сработало для меня

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

, а также изменив li и ul, чтобы удалить точку и интервал, чтобы исправить ее полностью.

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