Fatal编程技术网
  • css/
  • Css 在p:selectOneRadio上使用长文本时，标签不对齐

Css 在p:selectOneRadio上使用长文本时，标签不对齐

css jsf primefaces

Css 在p:selectOneRadio上使用长文本时，标签不对齐,css,jsf,primefaces,Css,Jsf,Primefaces,我正在尝试使用JSF和primefaces实现一个简单的接口。 我需要一个问题列表，对于每个问题，用户将能够选择不同的选项。这些选项很长，我对单选按钮的对齐有问题 其中一个问题的代码如下所示： <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

我正在尝试使用JSF和primefaces实现一个简单的接口。 我需要一个问题列表，对于每个问题，用户将能够选择不同的选项。这些选项很长，我对单选按钮的对齐有问题

其中一个问题的代码如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

<h:head>
</h:head>
<h:body>
    <h:form>
        <div class="ui-g">
            <div class="ui-g-1"></div>
            <div class="ui-g-10">
                <p:panelGrid columns="1" layout="grid"
                    styleClass="showcase-text-align-center">
                    <h2>Domanda 1</h2>
                    <p:selectOneRadio id="domanda1" layout="pageDirection">
                        <f:selectItem itemLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. " itemValue="1" />
                        <f:selectItem itemLabel="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." itemValue="2" />
                        <f:selectItem itemLabel="Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." itemValue="3" />
                        <f:selectItem itemLabel="Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium" itemValue="4" />
                    </p:selectOneRadio>
                </p:panelGrid>
            </div>
        </div>
    </h:form>
</h:body>
</html>


多曼达1号
我得到的输出如下：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

<h:head>
</h:head>
<h:body>
    <h:form>
        <div class="ui-g">
            <div class="ui-g-1"></div>
            <div class="ui-g-10">
                <p:panelGrid columns="1" layout="grid"
                    styleClass="showcase-text-align-center">
                    <h2>Domanda 1</h2>
                    <p:selectOneRadio id="domanda1" layout="pageDirection">
                        <f:selectItem itemLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. " itemValue="1" />
                        <f:selectItem itemLabel="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." itemValue="2" />
                        <f:selectItem itemLabel="Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." itemValue="3" />
                        <f:selectItem itemLabel="Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium" itemValue="4" />
                    </p:selectOneRadio>
                </p:panelGrid>
            </div>
        </div>
    </h:form>
</h:body>
</html>

正如您所看到的，我有一个与最后一个单选按钮关联的标签，它与所有其他按钮都不对齐。有没有办法解决这个问题？

您可以覆盖Primefaces样式来实现这一点（请查看此处以获取完整的描述）：


.ui-selectmanycheckbox.ui-widget td、.ui-selectoneradio.ui-widget td{
显示器：flex；
}
.ui选择器Radio标签{
单词break：打破一切；
}
多曼达1号
我建议您也检查一下所用功能的浏览兼容性

下面是发生的情况（请注意，实际行为可能取决于pf版本，如果您使用的是特定的主题，这里我以pf 6.2中的components.css为例）：Primefaces selectOneRadio创建一个表，因此每个单选按钮都位于继承表单元格布局的单元格中。单个单选按钮基本上是作为两个项目写入的，一个div，包含带有类型radio的输入和标签

这两个标记都从pf css继承内联块显示。内联块显示在同一行中（如果它们合适），否则它们将分别放在一行上。 Display flex可以管理这种情况，使内容适应空间，有关更好的说明，请参阅

现在，您只需要管理最后一个最糟糕的场景：一个单词比您的行长。为此，您可以使用单词break样式。在这里，您可以选择是在单词开始时开始新行（断开单词），还是在到达行结束时开始新行（全部断开），请参阅所有选项

我认为使用css实现布局总是有不同的方法，所以尝试一些指南并测试不同的方法来不断学习

如果您愿意，Primefaces还有一个面向多平台的版本，因此具有响应性等，您可以在此处看到更多信息

关键是更改css样式中的初始显示：

body .ui-selectmanycheckbox.ui-widget label, body .ui-selectoneradio.ui-widget label {
    display: initial;
    vertical-align: middle;
    margin-top: 0;
}
尝试添加
style=“white space:nowrap；”“
这并不完美，但可能会有帮助……或导致其他问题。我改进了标题和标记。请检查差异并将其牢记在心如果不使用
p：重复
？如果不是，请不要在代码中输入int。了解’s。并与css一起玩，看看是什么修复了它。@Kukeltje感谢您的建议。如果没有p:repeat，我也会遇到同样的问题。请尝试添加以下样式：.ui-selectmanycheckbox.ui-widget td、.ui-selectoneradio.ui-widget td{display:flex；}，您可以找到支持此功能的浏览器