自定义视觉力内联页面上的 4 列答案

【问题标题】：4 columns on a custom visual force inline page自定义视觉力内联页面上的 4 列
【发布时间】：2016-08-15 15:51:03
【问题描述】：

我有需要像这样设置的值：

像这样显示，但有四列：

我尝试过这种方式，但结果一团糟……（上图是一个示例，支票总额中包含 0.00 美元）：

我使用的代码是：

<apex:page standardController="BookingEvent__c" extensions="EventInclusiveTotalPriceInlineExt" standardStylesheets="true" tabstyle="BookingEvent__c" docType="html-5.0">
  <apex:form>
    <apex:pageBlock mode="maindetail">
      <apex:pageBlockSection columns="4">
        <apex:outputfield value="{!be.ForecastRevenue1__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue2__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue3__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue4__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue5__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue6__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue7__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue8__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue9__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue10__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue11__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue12__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue13__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue14__c}"></apex:outputfield>
        <apex:outputfield value="{!be.ForecastRevenue15__c}"></apex:outputfield>
      </apex:pageBlockSection>
    </apex:pageBlock>
  </apex:form>
</apex:page>

我不知道如何设置样式，它需要看起来像在第二张图片中显示的那样。

任何帮助都会很棒，我是 VF 的新手，还不擅长造型，并且很难找到我正在寻找的东西。

【问题讨论】：

你应该在 Salesforce.Stackexchange 中发布这个
@Eric 谢谢 Eric 刚刚做了！甚至没有意识到他们有一个！

标签： salesforce styling visualforce

【解决方案1】：

要在 Visuaforce 页面上构建非常困难的布局，您可以使用 HTML 和 CSS 的强大功能，通常它比 Visuaforce 标签更方便。

因此，为了在您的第一个屏幕上实现表格，我更愿意在包含 apex:outputfield 标记的单元格中使用 HTML 表格标记。

【讨论】：