Кнопка смещения веб-браузеров

Question

Итак, у меня есть div высотой 36px с формой (#refine_search).Форма содержит только кнопку высотой 35 пикселей (#refine_search_button).Все хорошо, пока я не добавляю span после формы с размером шрифта более 17px.В этот момент кнопка будет отображаться на 2 или 3 пикселя вниз от верхней части div.

Вы можете увидеть ее в действии здесь: http://nolasatellitegovernment.tulane.edu/search.php

CSS:

 #bluenav {
    width:1124px;
    height:36px;
    position:relative;
    background:url(/g/internal_page_blue_nav_bg.jpg) repeat-x #afdeff;
 }

  #refine_search {
      display:inline;
      padding:0 0 0 110px;  
      margin:0;
    }

    #refine_search_button {
      width:92px;
      height:35px;
      background:url(/g/refine_search_button.jpg) no-repeat;
      border:0;
      padding:0;
      margin:0;
    }

    #refine_search_button:hover {
      background:url(/g/refine_search_button_over.jpg) no-repeat;
    }

    .big_heading {
      font-size:22px;
      font-weight:bold;
    }

А код выглядит так:

<div id="bluenav"><form action="refine_search.php" id="refine_search"><input type="submit" id="refine_search_button" name="submit" value="" /></form><span style="padding:0 10px 0 20px; font-size:22px">
</div>

Кто-нибудь знает, почему текст размером 18 пикселей сместит предыдущую кнопку в контейнере высотой 35 пикселей?

Answer 1

Добавить vertical-align: top к #refine_search_button.

Значение по умолчанию vertical-align равно baseline, а добавление span с различными font-size корректирует положение базовой линии.

Если вы также хотите расположить текст «Результаты индекса» по вертикали, добавьте line-height: 36px к содержащему span.

Answer 2

#refine_search {
  display:block;
  float: left;
  padding:0 0 0 110px;  
  margin:0;
}

Answer 3

Поскольку вы используете display: inline, они зависят друг от друга, как изображения и текст в одной строке. Вместо этого попробуйте использовать display: block; плыть налево; на обоих элементах они всегда будут всплывать наверх:)

Может даже работать с дисплеем: inline-block;

IMO, лучше делать кодирование лучше, чем использовать высоту строки и т. Д. Для решения динамической проблемы (т.е. вы меняете размер шрифта и т. Д.)

Answer 4

Просто добавьте line-height:36px к своему идентификатору #refine_search_button, и это должно решить проблему.