Question

当我将Primefaces SelectOneMenu放在Primefaces Input旁边时，它们在浏览器中的高度不同（在Firefox，IE和Chrome中也是如此）：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head />
    <h:body>
        <p:selectOneMenu>
            <f:selectItem itemLabel="Item1" />
        </p:selectOneMenu>
        <p:inputText value="Text" />
    </h:body>
</html>

是否可以（使用css）将这两个输入彼此相邻放置，以便它们可以在同一垂直位置的一行显示？

（我使用Primfaces 5.1。）

Answer 1

尝试使用vertical-align属性。

<h:body>
    <p:selectOneMenu style="vertical-align:middle">
        <f:selectItem itemLabel="Item1" />
    </p:selectOneMenu>
    <p:inputText value="Text" style="vertical-align:middle" />
</h:body>

请注意，组件的高度不一定是middle。检查为selectOneMenu和input生成的html，为vertical-align尝试不同的值，并为您找到最佳变体。

Answer 2

如果您没有任何父控件来保持组件处于相同的结构（<h:body>不计数：D），那就太难了。

您可以尝试使用div来保持组件在同一行中，然后只调整内容，或使用<p:panelGrid>组件。

以下是使用<p:panelGrid>可能有效的一个示例。看到我正在创建<p:row>以使组件保持在同一行，并<p:column>将元素分隔开来。

如果空间太紧，panelGrid可以自行调整大小，用浏览器检查并调整大小。

<p:panelGrid style="width:400px">
  <p:row>
    <p:column style="text-align: center">
       <p:selectOneMenu>
          <f:selectItem itemLabel="Item1" />
       </p:selectOneMenu>
    </p:column>
    <p:column style="text-align: center">
       <p:inputText value="Text" />
    </p:column>
 </p:row>
</p:panelGrid>

以下是一些例子：http://www.primefaces.org/showcase/ui/panel/panelGrid.xhtml

根据您的需要，建议您使用div而不是panelGrid。

Answer 3

我建议您修改SelectOneMenu中的上边距，如下所示：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head />
    <h:body>
        <p:selectOneMenu style="margin-top: 3px">
            <f:selectItem itemLabel="Item1" />
        </p:selectOneMenu>
        <p:inputText value="Text" />
    </h:body>
</html>

使用这3个像素，我发现这些组件的高度没有区别。

Answer 4

如果我们想要使用带有selectonemenu的文本框

，如果应用了文本框，此Css将解决此问题

vertical-align: top;

Answer 5

接受的答案中的硬编码风格是轻微的黑客攻击。更简洁的解决方案是在CSS文件中引用p:selectOneMenu的CSS类：

.ui-selectonemenu {
    vertical-align:middle;
}

不幸的是，p:selectOneMenu的文字部分嵌入在<div>内，因此尝试vertical-align:baseline与<div>周围的文字无关。< / p>

InputText旁边的Primefaces SelectOneMenu位于不同的垂直位置

5 个答案: