<h:commandLink> 和 <h:commandButton> 之间相同样式的 CSS 问题答案

【问题标题】：CSS issue between <h:commandLink> and <h:commandButton> for same style<h:commandLink> 和 <h:commandButton> 之间相同样式的 CSS 问题
【发布时间】：2011-09-08 11:34:47
【问题描述】：

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

本页中的示例 A 是 by，B,c 是 by

-----------------------------------------
|                                        |
|                                        |
|                                        |  
|                                        |
|                        ----- -----     |
|                 -----  | 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>不匹配。

谁能帮我摆脱困境？

【问题讨论】：

标签： html css jsf

【解决方案1】：

试试这个（我猜了一下，因为我不熟悉 JSF）：

.ButtonStyle {
    vertical-align: top
}

默认的vertical-align 是baseline，这看起来就像你的 ASCII 艺术作品。

【讨论】：

很好，我试过了，它几乎可以正常工作，谢谢哥们
您将accepted answer 更改为不同的有什么特别的原因吗？

【解决方案2】：

获取 firebug 并尝试分析元素及其容器的 css。您的链接和按钮可能继承自其他 css 定义。

【讨论】：

是的，谢谢，你说得对，其实我早就用firebug试过了，从那以后我才知道这个问题。