在 JSF inputText 和 outputText 组件之间插入换行符答案

【问题标题】：Inserting line break in-between JSF inputText and outputText components在 JSF inputText 和 outputText 组件之间插入换行符
【发布时间】：2017-08-14 21:03:28
【问题描述】：

我在做一些应该很简单的事情时遇到了困难。

我无法让我的浏览器（在 Ubuntu 16.04 上运行的 Firefox）尊重  标签。应用服务器是嵌入在我的 Java 应用中的 tomcat 7。

这是我想要做的：

<?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"
      template="/WEB-INF/template.xhtml"
      xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
    <script src="https://js.stripe.com/v3/"></script>
    <h:head>

    </h:head>
    <h:body>
        <form action="/portal/form" method="POST" id="myform">
            <h:outputText value="Please enter the requested credit card and billing information below"/>
            <label>
                <span>Address</span>
                <h:inputText class="field" id="address1" />
                <br></br>
                <h:outputText value="City" /> <h:inputText class="field" id="city"/>
                <h:outputText value="State" /> <h:inputText class="field" id="state" />
                <h:outputText value="zip" /> <h:inputText class="field" id="zipcode" />
            </label>

            <button type="submit">Pay $25</button>
        </form>
    </h:body>
</html>

您会注意到我包含了结束   标记。那是因为没有它我会出错。

浏览器只是在同一行上一个接一个地显示一个文本字段，没有任何中断。

Error Traced[line: 37] 元素类型“br”必须由匹配结束标签“”。

那么，我怎样才能让它尊重换行符？

EDIT 1 我再次尝试  并没有收到任何错误，但它并未将其解释为换行符。它在 HTML 源代码中生成 。

【问题讨论】：

br 是一个自闭合标签。应该是 
你试过
吗？
我也试过
，但它给了我同样的错误。
尝试删除包装标签。将整个内容块包装在标签中根本没有意义。

标签： java html jsf jsf-2

【解决方案1】：

如错误信息所示，肯定是： 。
然后进入您的浏览器开发者控制台（例如 Firebug）并检查<label> 标签的display 属性。您可能必须通过 css 样式将其设置为 display: inline-block; （参见以下示例）。

示例 1（可能是您的情况）

您可能对display 属性有某种flex 设置。看起来像这样：

label {
  display: flex;
}
input { width: 50px; }

<label>
    <span>Address</span>
    <input type="text" class="field" id="address1" />
    <br />
    <input type="text" value="City" />
    <input type="text" value="State" /> 
    <input type="text" value="zip" />
</label>

<button type="submit">Pay $25</button>

示例 2（工作原理）

如果您按上述方式设置显示属性，您将得到想要的结果。

label {
  display: inline-block; /* check the display attribute! */
}
input { width: 50px; }

<label>
    <span>Address</span>
    <input type="text" class="field" id="address1" />
    <br />
    <input type="text" value="City" />
    <input type="text" value="State" /> 
    <input type="text" value="zip" />
</label>

<button type="submit">Pay $25</button>

编辑

还要检查标签  没有display 属性none。这也是换行符的元素。

br { display:none; }

Test &lt;br /&gt; test

【讨论】：