Css Primefaces SelectOne InputText旁边的菜单位于不同的垂直位置_Css_Primefaces

Css Primefaces SelectOne InputText旁边的菜单位于不同的垂直位置

css primefaces

Css Primefaces SelectOne InputText旁边的菜单位于不同的垂直位置,css,primefaces,Css,Primefaces,当我像这样将Primefaces SelectOne菜单放在Primefaces输入旁边时，它们在浏览器中的高度不同（在Firefox、IE和Chrome中相同）：有没有可能（使用css）将这两个输入相邻放置，以便它们可以在同一垂直位置的一行中显示（我使用Primfaces 5.1。）当您没有任何父控件时，很难将组件保持在相同的结构中（不计算：D）您可以尝试使用div将组件保持在同一行中，然后只对齐内容，或者使用组件下面是一个可能有效的示例，使用。请注意，我正在创建一个来保持组件在同

当我像这样将Primefaces SelectOne菜单放在Primefaces输入旁边时，它们在浏览器中的高度不同（在Firefox、IE和Chrome中相同）：

有没有可能（使用css）将这两个输入相邻放置，以便它们可以在同一垂直位置的一行中显示

（我使用Primfaces 5.1。）

当您没有任何父控件时，很难将组件保持在相同的结构中（

不计算：D）

您可以尝试使用div将组件保持在同一行中，然后只对齐内容，或者使用

组件

下面是一个可能有效的示例，使用

。请注意，我正在创建一个

来保持组件在同一行中，并创建一个

来分隔行中的元素

请注意，如果空间太紧，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>

以下是一些例子：

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

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

<!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个像素，我看不出这些组件的高度有什么不同。

尝试使用属性

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

请注意，要使组件处于相同高度，不一定要使其处于中间位置。检查生成的html中的

selectOneMenu

和

input

，尝试使用不同的

vertical align

值，并找到适合您的最佳变体。

只要我们想将textbox与selectOneMenu一起使用，如果将此Css与textbox一起应用，则可以解决此问题

vertical-align: top;

在被接受的答案中，硬编码的风格是一个轻微的改动。更简洁的解决方案是在CSS文件中为

p:selectOneMenu

添加对CSS类的引用：

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

不幸的是，

p:selectOneMenu

的文本部分嵌入在

中，因此尝试

垂直对齐：基线

不会与

周围的文本相关，谢谢。我还尝试使用div和panelGrid。panelGrid的问题更小，但仍然存在。如果删除边界线，还将注意到垂直对齐中的细微差异。另外，在我的特殊情况下，我不想使用表格，因为如果没有足够的水平空间，我希望输入文本可以显示在SelectOne菜单下。你能不能给我举一个关于div的例子？这对我不起作用<代码>页边距顶部在

selectone菜单上

使两个组件向下移动，但保持垂直对齐。非常奇怪。是的，这个解决方案实际上是有效的，它甚至不是一个肮脏的黑客！关键是我们希望文本在同一条基线上。当您将输入字段放在标签旁边时，它可以很好地实现这一点，但当您尝试将selectOneMenu（div中的嵌入标签）放在标签旁边时，它就不能实现这一点。放在基线上的是外部div，而不是内部文本。使用middle可能更好，但不能解决基线问题1

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