Question

晚上好，我想知道如何在不使用<div>的情况下在同一个<h:outputText value=" " />的JSF组件之间插入空间，并且为了插入我希望我重复这些的所需空间标记大约50次！有哪些替代方法，这些是<div>：

<div
    style="width: 100%; font-size: 20px; line-height: 30px; background-color: gray">
    <h:outputText value="&#150;" />
    <h:outputLabel value="Notifications ">
        <h:graphicImage
            value="/resources/images/lunapic_136698680056094_2.gif" />
    </h:outputLabel>

    /// insert space here

    <h:outputLink id="lnk" value="#">
        <h:outputText value="Welcome,Islam"></h:outputText>
    </h:outputLink>

    <p:tooltip for="lnk">
        <p:graphicImage value="/resources/images/sofa.png" />
    </p:tooltip>

</div>

Answer 1

这通常是使用CSS来实现的，例如通过margin属性。 CSS适用于HTML和JSF在当前问题的上下文中只是一个HTML代码生成器。您应该忽略问题中的JSF部分，并专注于JSF生成的HTML输出以实现该要求。您可以通过在Web浏览器中右键单击查看源来查看它。如果HTML需要一些更改，那么更改JSF源代码，使其生成完全所需的HTML。

E.g。

<h:outputLabel value="Notifications" style="margin-bottom: 100px;">

（请注意，使用style是一种不好的做法; CSS最好在.css文件中声明，您可以通过<h:outputStylesheet>导入并通过{{1}引用}）

同样，这一切都与JSF无关。 JSF在这个问题的上下文中只是一个HTML代码生成器。如果您对基本的HTML / CSS不熟悉，因此并不完全了解JSF正在制作什么，那么我强烈建议您暂停JSF并首先学习这些基础知识。

无关具体问题，styleClass会生成HTML <h:outputLabel>元素，但您似乎没有与之关联的任何HTML输入元素。你本质上是为了错误的目的而滥用标签元素。 Understanding basic HTML和how to write semantic HTML并且知道HTML输出those JSF components确切生成的内容应该会让您朝着正确的方向前进。在这种特殊情况下，您应该使用<label>代替。

Answer 2

要在同一行中的组件之间插入空格，可以使用带有1x1清晰图像的img标记。（注意：在其他选项耗尽之前，这应该是最后的手段，请参阅下面的讨论）

<img width="100" height="10" src="/path-to/dot_clear.gif" />
e.g.
<img width="100" height="10" src="https://raw.githubusercontent.com/jonathanluo/jsf/master/images/dot_clear.gif" />

输入所需的宽度;对于高度，任何数字都在1到10之间。默认情况下，宽度和高度的单位是像素

获取点清晰图像的副本，并将其保存到https://raw.githubusercontent.com/jonathanluo/jsf/master/images/dot_clear.gif

的本地资源中

右键单击内容区域并另存为...

JSF在同一<div> </div>中的组件之间插入空格

2 个答案: