Главное меню интерфейса табуляции

Question

У меня проблема с простым языком меню. Это вкладки состоят из двух элементов. Английский и испанский.

Проблема заключается в том, что при появлении флагов рядом с флагами появляется гигантское пустое пространство.

The white space on the right side of the flags

Я не вижу никакой проблемы в коде. Я хотел знать, знает ли кто, как его решить.

Код:

<ul> 
<h:form> 
<li> 
<h:commandButton action="#{localeBean.changeLanguage('en')}" value="English" image="/resources/modena-layout/images/us.png" />       
</li> 

<li> 
<h:commandButton action="#{localeBean.changeLanguage('es')}" value="Spanish" image="/resources/modena-layout/images/es.png" /> 
</li> 
</h:form> 
</ul> 

Answer 1

Вместо commonButton, может быть, вы должны попробовать что-то вроде этого:

<p:commandLink action="#{localeBean.changeLanguage('en')}" 
    <div id="englishFlag" class="englishFlagClass" /> 
</p:commandLink> 

CSS:

.englishFlagClass { 
    width: 24px; 
    height: 24px; 
    background: url("../url_to/englishFlag.png") no-repeat center; 
    background-size: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    display: inline-block; 
} 

Таким образом, изображение на самом деле ссылку, но выглядит как кнопка. Затем вы можете создать эту ссылку с помощью CSS по своему усмотрению. Возможно, некоторые свойства CSS избыточны в вашем случае (я просто скопировал некоторый образец), но это начало.

Answer 2

Я закончил использование CSS, чтобы организовать отдельную панель.

Как это:

element.style { 
    width: 22px; 
    margin: 10px; 
    padding: 3px; 
}