Question

在我的示例应用程序中，我在JSF页面底部有3个操作按钮，它由2个命令按钮和1个命令链接设计。问题是我为这3个提供了相同的样式类，但命令按钮在单行中正确显示但命令链接不在同一行。

此页面中的示例A是，而B，c是

-----------------------------------------
|                                        |
|                                        |
|                                        |  
|                                        |
|                        ----- -----     |
|                 -----  | 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定义。

相同样式的<h：commandlink>和<h：commandbutton>之间的CSS问题</h：commandbutton> </h：commandlink>

2 个答案: