css - JSF CSS panelGrid - 如何使其包含的元素都保持恒定宽度

Question

例如，现在我正在尝试将一个 panelGrid 添加到包含 X 个按钮的页面。每个按钮都有不同的长度，具体取决于与其关联的文本的长度。我希望能够在 panelGrid 级别指定以确保每个组件都拉伸(stretch)以满足 panelGrid 本身的宽度 - 而不是必须手动设置 X 个按钮的宽度。

它必须与 columnClasses 相关并通过 CSS 设置宽度，但我所做的尝试没有奏效。例如，我将 panelGrid 上的 styeClass 设置为宽度为 100px 的类。然后我也尝试将 ColumnClass 设置为该 CSS 类 - 仍然没有成功。

想法？

Answer 1

对于这个panelGrid...

  <h:panelGrid styleClass="panelGridClass" columns="2">
    <h:commandButton value="b1" />
    <h:commandButton value="button 2" />
    <h:commandButton value="button 3 is really long" />
    <h:commandButton value="b4" />
  </h:panelGrid>

您可以使用此 CSS 将按钮设置为等宽:

TABLE.panelGridClass {
    width: 300px;
}
TABLE.panelGridClass TR TD {
  width: 50%;
}
TABLE.panelGridClass TR TD INPUT {
    width: 95%;
}

这会将表格设置为 300 像素宽，单元格为表格宽度的一半，按钮占据单元格宽度的大部分。如果按钮的自然长度超过 150 像素，列的宽度可能不相等，但您可能可以使用溢出规则或其他方法来克服这个问题。