如何在VisualForce页面中控制顶点输入字段的宽度

Question

由于标准的页面布局不允许您调整绑定到一个文本字段的inputfield的宽度,我试图创建一个VisualForce页,但没有为顶点的宽度属性:inputfield组件.我想我将不得不使用样式或CSS或其他东西,但我不知道如何.

我需要做些什么才能调整文本输入字段的宽度？

请使用Web界面(而非Force.com IDE)提供说明.谢谢.

编辑

我最终使用了这样的嵌入式样式

<apex:inputfield value="{!Country__c.Full_Name__c}" style="width:400px"/>

Answer 1

你应该可以使用css来做到这一点.几乎所有的Visualforce标签都有一个名为styleClass的属性,它是要使用的css类的名称,即:

<apex:inputText styleClass="myClass" ... />

变为:

<input type="text" class="myClass" ... />

因此,使用此功能,您可以使用页面顶部的CSS指定宽度.以下是使用标准Contact控制器的页面的完整示例(虽然没有很好的格式!):

<apex:page standardController="Contact">
    <style type="text/css">
        .myClass { width: 400px; }
    </style>

    <apex:form >
        <apex:outputLabel for="firstName" value="First Name"/>
        <apex:inputText styleClass="myClass" id="firstName" value="{!Contact.FirstName}"/>
    </apex:form>
</apex:page>

这也适用<apex:inputField>,但要警惕不同字段类型可能发生的情况.为了更具体的css(仅限CSS 3!)你可以这样做:

input[type="text"].myClass = { width: 400px; }