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

Question

由于标准页面布局不允许您调整绑定到文本字段的输入字段的宽度，因此我尝试创建 VisualForce 页面，但 apex: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 指定宽度。这是使用标准联系人控制器的页面的完整示例（尽管没有很好的格式！）：

<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>

这也适用于 ，但要警惕不同字段可能发生的情况类型。要更具体地了解 css（仅限 CSS 3！），您可以这样做：

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