【Visualforce】テキストとかボタンをグループ化したい。

テキストエリアとか、ラベルとか、ボタンとかをインライン要素としてグループ化したい場合のやり方。

例えば<apex:pageBlockSection>配下にこんな項目を表示させたい場合。

こんなふうに<apex:pageBlockSection>配下にテキストとボタンを並べて書いてあげるだけだと・・

<apex:page controller="InlineSampleController">
    <apex:form>
        <apex:pageBlock>
            <apex:pageBlockSection title="サンプル">
                <apex:inputText value="{!text}" disabled="false" />
                <apex:commandButton value="検索"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

こんな感じになっちゃう。

なのでspanタグで囲ってあげると・・

<apex:page controller="InlineSampleController">
    <apex:form>
        <apex:pageBlock>
            <apex:pageBlockSection title="サンプル">
                <span>
                    <apex:inputText value="{!text}" disabled="false" />
                    <apex:commandButton value="検索"/>
                </span>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

さらに崩壊。

<apex:outputText>で囲んであげるとうまくいくようでした。
Visualforce 開発者ガイド apex:outputPanel

<apex:page controller="InlineSampleController">
    <apex:form>
        <apex:pageBlock>
            <apex:pageBlockSection title="サンプル">
                <apex:outputPanel>
                    <apex:inputText value="{!text}" disabled="false" />
                    <apex:commandButton value="検索"/>
                </apex:outputPanel>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>