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

Question

我有一些值需要像这样设置：

这样显示，但有四列：

我试过这种方式，但是一团糟...（上图是示例，支票总额内含 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 的新手，还不擅长造型，我很难找到我正在寻找的东西。

Answer 1

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

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

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

4 columns on a custom visual force inline page

salesforce

styling

visualforce