Question

我正在度过一段非常简单的事情。

我无法让我的浏览器（在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>

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

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

跟踪错误[第37行]元素类型“br”必须以匹配结束标记“”。

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

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

Answer 1

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

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

示例2（工作原理）

如果您按照上述说明设置了显示属性，则可以获得所希望的结果。

＆＃13;

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

＆＃13;

<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>

＆＃13;

修改

还要检查标记 是否没有display属性none。这也是换行的要素。

＆＃13;

br { display:none; }

＆＃13;

Test <br /> test

＆＃13;

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

1 个答案:

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

示例2（工作原理）

修改