Question

我遇到了Primefaces简单语言菜单的问题。它的标签由两个元素组成。英语和西班牙语。

我遇到的问题是，当标志出现时，标志旁边会出现一个巨大的空白区域。

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

Primefaces tabview语言菜单

2 个答案: