PHP：从单个 <?php?> 呈现时，html 标记之间没有空格

Question

这是一个奇怪的问题，我想知道为什么会这样..

我正在使用Yii2 框架并创建了一个widget 以从Twitter bootstrap 呈现缩略图，如果需要，我已经编写了呈现多个按钮的代码，但是当我呈现多个按钮时，它们彼此之间似乎没有任何空间，我检查了HTML 代码，它似乎很好，我什至将视图与两个相同的代码进行了比较，一个来自PHP，另一个来自HTML，

这就是它的样子，两者都有相同的 HTML 代码，但第一个是从 PHP 呈现的

HTML的代码是这样的，两种情况的代码相同，不同的是第一个来自php

<div class="thumbnail">
    <div class="caption">
        <h3>testing</h3>
        <p>Lorem ipsum dolor</p>
        <p>
            <button type="button" class="btn btn-default" name="/localhost/backend/web/site/index">Button</button>
            <button type="button" class="btn btn-default" name="/localhost/backend/web/site/index">Button</button>
            <button type="button" class="btn btn-default" name="/localhost/backend/web/site/index">Button</button>
        </p>
    </div>
</div>

<div class="thumbnail">
    <div class="caption">
        <h3>testing</h3>
        <p>Lorem ipsum dolor</p>
        <p>
            <button type="button" class="btn btn-default" name="/localhost/backend/web/site/index">Button</button>
            <button type="button" class="btn btn-default" name="/localhost/backend/web/site/index">Button</button>
            <button type="button" class="btn btn-default" name="/localhost/backend/web/site/index">Button</button>
        </p>
    </div>
</div>

Answer 1

默认情况下，PHP 会取消空格。但是，您可以使用 &nbsp 告诉它添加空格。

这是语法： echo str_repeat(' ',1);

第一个参数会添加空格，第二个参数是要添加多少空格

你可以在回显你的按钮后放它

Answer 2

我遇到了类似的问题。尝试在按钮之间插入 html cmets，因为空格也有宽度。 例如

<input .... /><!--
--><input .... /><!--
--><input .... />

Answer 3

我 90% 确定这是因为 css 和输出的 html 的组合。

如果你有按钮元素 css 样式：display: inline-block 并且在 html 标签之间至少有一个空格 你会得到空格（新行也算在内） 与：空间

 <button>foo</button>
 <button>bar</button>

没有空格

 <button>foo</button><button>bar</button>

php 没有空格的原因可能是因为在渲染过程中会出现空格剥离

此外，如果发布的代码来自 inspecting the code 带有 chrome 或其他什么，它不是它形成的真正代码结构。试试看右键->源代码

如果你想修复它。

可以通过以下方式解决：

• 将元素的 css 更改为 display: block; float: left -> 使用 flaots 使其成为块元素。

• 将您的 css 更改为使用 display: flex - 如果您不知道，请在 Google 上搜索。

• 删除 html 标签之间的空格/缩小 html - 并保留display: inline-block

Answer 4

通过在每个元素之间添加regex 来解决此问题

例如，我们在php 的foreach 循环中处理了多个元素，并将结果连接到一个字符串中

<?php 

function createButtons($data)
{
    /**
     * [$html Here is where the html buttons are going to be stored]
     * @var string
     */
    $html = '';

    /**
     * This will generate Html Button for each element in the array and concatenate into $html as string like this:
     * <button><button><button><button>
     */
    foreach($data as $button)
        $html .= Html::Button($data['name'], $data['options']);

    return $html;
}

为了使它为每个元素创建一个新行，"\n" 这是一个 regex 代码添加一个新行

<?php 

function createButtons($data)
{
    /**
     * [$html Here is where the html buttons are going to be stored]
     * @var string
     */
    $html = '';

    /**
     * This will generate Html Button for each element in the array and concatenate into $html as string like this:
     * <button>
     * <button>
     */
    foreach($data as $button)
        $html .= Html::Button($data['name'], $data['options'])."\n"; //This "\n" adds a new line in the string

    return $html;
}