1

私たちのページは、次の行に沿ってレンダリングされます。 ここに画像の説明を入力

これをもう少しうまくフォーマットする方法はありますか？たとえば、ラベルを 1 つの列に、入力を別の列に入れることができますか?

コードのスニペットを次に示します。

renderContentOn: html

    html horizontalRule.
    html horizontalRule.
    html heading level: 2; with: 'System Warnings & Errors:'.
    html horizontalRule.
    (SpendingManager warningsFound = false) ifFalse: [ 
        self renderWarnings.
        WarningsReport renderContentOn: html.
        SpendingManager clearProblemList.

    html horizontalRule.
    html horizontalRule.
    ].

        html heading level: 2; with: 'Create A Fund:'.
            html form: [
            html label: 'Code:  '.
            html textInput
            on: #fName of: FundCreator.
                html break.
            html label: '   Starting Amount:  '.
            html textInput
            on: #amount of: FundCreator.
                html break.

        html submitButton
            callback: [(FundCreator fName = '') ifFalse: [FundCreator createFromUI.] 
                                                ifTrue: [SpendingManager addProblem: 'SP0002']. 
            self renderReport ];
            text: 'Create Fund'.
        ].

        html heading level: 2; with: 'Create A GLAC:'.
        html form: [

            html label: 'Code:  '.
            html textInput
            on: #gName of: GLACCreator.
                html break.

            html label: '   Debit Fund:  '.
            html textInput
            on: #dFund of: GLACCreator.
                html break.

            html label: '   Credit Fund:  '.
            html textInput
            on: #cFund of: GLACCreator.
                html break.

            html label: '   Description:  '.
            html textInput
            on: #descr of: GLACCreator.
                html break.

        html submitButton
            callback: [GLACCreator createFromUI. self renderReport ];
            text: 'Create GLAC'.

    ].

        html heading level: 2; with: 'Create a Transaction:'.
        html form: [

            html label: 'GLAC:  '.
            html textInput
            on: #aGLAC of: TransactionCreator.
                html break.

            html label: '   Amount:  '.
            html textInput
            on: #amount of: TransactionCreator.
                html break.

        html submitButton
            callback: [TransactionCreator createFromUI. self renderReport ];
            text: 'Create Transaction'.

    ].
4

2 に答える 2

3

できることはいくつかあります。

簡単なのは、テーブルをレンダリングし、すべてのラベルを 1 つの列に配置し、テキスト入力をもう 1 つの列に配置することです。css を使用して、テーブルとセルの境界線を非表示にします。

より良い解決策は、css クラスをラベルに割り当て、再度 css を使用してすべてのラベルを同じサイズと向きにすることです。

于 2013-07-17T03:44:44.053 に答える
0

間違いなく CSS でこれを行います。それが目的です。ラベルと入力要素をブロックとして表示するように設定し、幅と配置を使用して必要なレイアウトを取得できます。

このようなものから始める必要があります:

form label {
  display: block;
  float: left;
  text-align: right;
  padding-right: 1em;
  padding-top: 0.3em;

  width: 15em;
}

form input {
  display: block;
  float: left;
  padding-top: 0.3em;
}

form br {
  clear: left;
}
于 2013-08-14T10:25:51.083 に答える