丰富：日历图标未与显示框显示在同一行答案

【问题标题】：rich:calendar icon not displaying on same line as display box丰富：日历图标未与显示框显示在同一行
【发布时间】：2009-07-10 14:47:20
【问题描述】：

我有一个使用 Java Server Faces 和 Facelets 的基于 Java 的 Web 应用程序。

我正在使用richfaces calendar 输入日期范围。

这是网页上的代码。

<h:panelGroup>
    <fieldset>
        <legend>Date Submitted</legend>
        <rich:calendar value="#{SearchBean.start_dateSubmitted}" />
        <rich:calendar value="#{SearchBean.end_dateSubmitted}" />
    </fieldset>
</h:panelGroup>

这是 Firefox 中的结果。

alt text http://img16.imageshack.us/img16/3717/richcalendar.png

所以，我的问题是图标在下一行，而不是与显示框在同一行。

【问题讨论】：

标签： richfaces

【解决方案1】：

解决方案：

图像 html 标记有一个通用的 css 设置。

img {
    display: block;
}

由于丰富的日历由输入和图像组成，因此它们以块形式显示，这将两者放在不同的行上。

我不能只取出 css 行，因为它会对 web 应用程序的其余部分产生不良影响。因此，必须用以下代码 css 代码覆盖它。

img.rich-calendar-button {
    display: inline;
}

但是，现在这会将所有四个元素放在一行中。要解决此问题，您需要像这样阻止整个富日历。

<h:panelGroup>
    <fieldset>
       <legend>Date Submitted</legend>
       <a4j:outputPanel layout="block">
           <rich:calendar value="#{TicketSearchBean.start_dateSubmitted}" />
       </a4j:outputPanel>
        <a4j:outputPanel layout="block">
            <rich:calendar value="#{TicketSearchBean.end_dateSubmitted}" />
        </a4j:outputPanel>
    </fieldset>
</h:panelGroup>

更好的解决方案：不要在通用 html 标签上设置 css。如果您想在某物上设置特殊的 css，请为其创建一个类。

【讨论】：