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

Question

晚上好，我想知道如何在同一个<div>中插入JSF组件之间的空格，而不使用<h:outputText value="&#160;" />。我已经使用了它，为了插入我想要的空格，我重复使用这个标签大约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>

- Eslam Hamdy

---

"<br/>"有什么问题吗？或者如果你是指水平间距，那么" "呢？ - SJuan76

它插入了一个新行，我想要一个空格而不是一个新行。 - Eslam Hamdy

Answer 1

这通常可以通过使用CSS来实现，例如通过margin属性。CSS适用于HTML，而JSF仅是一个HTML代码生成器。您应该忽略问题中的JSF部分，集中精力在JSF生成的HTML输出上，以达到要求。您可以通过在Web浏览器中右键单击，选择查看源代码来查看它。如果HTML需要进行一些更改，则需更改JSF源代码，使其生成所需的HTML。

例如：

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

请注意，使用style是一种不良的做法；应该在一个.css文件中声明CSS，然后通过<h:outputStylesheet>导入并通过styleClass属性引用。

再次强调，这与JSF无关。在此问题的上下文中，JSF仅是一个HTML代码生成器。如果您是刚接触基本HTML / CSS的新手，因此不太理解JSF正在生成什么内容，那么我强烈建议您暂停JSF并先学习这些基础知识。

---

与具体问题无关的，<h:outputLabel> 生成一个 HTML <label> 元素，但你似乎没有任何与之相关联的 HTML 输入元素。实际上，你误用了标签元素。理解基本的 HTML 和 如何编写语义化的 HTML ，并了解 HTML 输出 这些 JSF 组件 实际上生成的内容，应该能让你朝着正确的方向前进。在这种特殊情况下，你应该使用 <h:outputText>。

- BalusC

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，然后右键单击内容区域并选择“另存为...”

- Jonathan L

---

为什么这比使用CSS更好/更现代？对我来说，像这样做事情是来自于IE8时代之前（或IE7）。浏览器已经有了很大的进步，不需要像这样通过解决问题来修复怪癖。 - Kukeltje

@Kukeltje，我刚刚提供了一个解决方案，并给用户提供了选择，没有将其与CSS或其他更好的解决方案进行比较。顺便说一句，从PrimeFaces 5.3.RC2开始，<p:spacer>在幕后使用img标签，这是我提到的相同想法。 - Jonathan L

是的，但要考虑到视障用户。对于他们来说，带有各种（对他们来说）无用的图像的页面会使页面无法使用。请参见https://www.w3.org/TR/WCAG20-TECHS/C18.html 。事实上，p:spacer存在并不意味着它应该被使用。我认为今天没有有效的理由使用这样的解决方案。 - Kukeltje

我们曾经有一个项目使用了复杂的CSS，为了在页面中插入所需的组件间距，开发人员尝试了边距、填充、块等方法，但都没有成功，反而导致了布局、字体颜色、背景颜色等问题。当时，图像间隔器是解决方案。虽然我同意你的观点，但我已经更新了答案并附上了注释。 - Jonathan L

谢谢…取消了踩（虽然还没有点赞 ;-)) - Kukeltje