Проблема CSS между <h: commandLink> и <h: commandButton> для того же стиля

Question

В моем примере приложения у меня есть 3 кнопки действий внизу страницы JSF, и она разработана с помощью 2 командных кнопок и одной по командной ссылке. проблема в том, что я дал один и тот же класс стилей для этих 3, но кнопки команд отображаются корректно в одной строке, а ссылка на команду не отображается в одной строке.

Пример на этой странице: А и В, с:

-----------------------------------------
|                                        |
|                                        |
|                                        |  
|                                        |
|                        ----- -----     |
|                 -----  | B | | c |     |
|                 | A |  ----- -----     |   
|                 -----                  |
-----------------------------------------

Мне нужно отобразить в одной строке. Класс стиля для этих кнопок:

.ButtonStyle{
    border: 1px solid #999;
    padding:1px 4px 1px 4px;
    color: #333;
    background-color: #e7e7e7;
    text-decoration: none;
    margin-right: 10px;
    display: inline;
    cursor:pointer;
}

Кодировка для этих 3:

<div align="right'>
 <h:commandLink id="" action=".."  value="A" styleClass="ButtonStyle"/> 
 <h:commandButton id="" action=".."  value="B" styleClass="ButtonStyle"/>
 <h:commandButton id="" action=".."  value="C" styleClass="ButtonStyle"/>
</div>

Я обнаружил, что проблема в стиле <h:commandlink> не совпадает с <h:commandbutton>.

Может ли кто-нибудь помочь мне выйти из этого?

Answer 1

Попробуйте (немного догадываюсь, потому что я не знаком с JSF):

.ButtonStyle {
    vertical-align: top
}

По умолчанию vertical-align равно baseline, что будет выглядеть как ваш ASCII-арт.

Answer 2

Получить Firebug и попытаться проанализировать CSS элементов и их контейнеров.Ваши ссылки и кнопки могут наследоваться от других определений CSS.