Блог

Главная - Вопросы по программированию - Выравнивание ввода с помощью кнопки в Firefox

Выравнивание ввода с помощью кнопки в Firefox

#html #css #firefox #alignment

#HTML #css #firefox #выравнивание

Вопрос:

У меня возникли проблемы с выравниванием обычного <button> рядом с вводом в Firefox. Я получаю следующий вывод в Firefox:

Вывод в Firefox

Класс ввода — university, класс кнопки — next, а код CSS — следующий:

 .university {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    text-transform: uppercase;

    padding: 20px;

    width: 400px;
    display: block;

    border: none;

    color: #000;

    border-radius: 3px 0px 0px 3px;
    -moz-border-radius: 3px 0px 0px 3px;
    -webkit-border-radius: 3px 0px 0px 3px;

    outline-style: none;
    outline-width: 0px;
    outline-color: #000;
}

#next {
    background-color: #C44D58;

    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    text-transform: uppercase;

    width: 150px;

    padding: 20px;
    margin: 0;

    color: #FFF;

    border: none;

    border-radius: 0px 3px 3px 0px;
    -moz-border-radius: 0px 3px 3px 0px;
    -webkit-border-radius: 0px 3px 3px 0px;

    outline-style: none;
    outline-width: 0px;
    outline-color: #000;
}

И HTML-это:

 <div class="universityContainer">
    <input type="text" class="university typeahead" placeholder="University Name">
    <button id="next">NEXT</button>
</div>

CSS для .universityContainer является:

 .universityContainer {
    display: table-cell;
    vertical-align: middle;
}

Примечание: Следует отметить, что он корректно отображается во всех браузерах, кроме Firefox.

Ответ №1:

Удалить display: block из .university . Скрипка:http://jsfiddle.net/gf9Tr /

Комментарии:

1. Это результат удаления display: block;

2. Вы можете попробовать использовать vertical-align: middle как для .university , так и для #next . Или предоставьте больше кода. Потому что удаление display: block приводит к выравниванию обоих элементов в Chrome и Firefox.

3. PS Хорошей практикой является предоставление jsfiddle эффекта, который вы наблюдаете. Облегчает понимание сути проблемы.

4. Может ли это иметь какое-то отношение к typeahead.js ?

5. @Shazer2 выполняет typeahead.js случайно не измените стили для этих элементов?

Ответ №2:

Вы можете удалить display: block; или использовать display: inline-block; вместо этого в классе университета.

Ответ №3:

Вам нужно изменить display:block в input элементе на display: inline-block . Вот jsbin, чтобы показать, что они выстраиваются правильно.