laravel blade模版渲染问题

Question

今天在使用laravel做开发时，遇到个以前没有遇到过很奇怪的问题，我想在一个p标签里面循环渲染一些div。类似效果如下：

<p>
  @foreach($list as $val)
    <div>{{ $val }}</div>
  @endforeach
</p>
//下面是理想效果...
<p>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</p>

然而我并不能达到想要的效果，我的代码及结果如下：

<p>
    @foreach($val['userList'] as $v)
    <div class="km-member clearfloat m_bottom" data-user_id="{{ $v->id }}">
      <div class="km-member-pic">
        <i class="km-member-bg"></i>
        <img src="{{ $v->avatar }}" alt="" class="km-member-img">
      </div>
      <span>{{ $v->realname }}</span>
      <i class="km-icon-delete"></i>
    </div>
    @endforeach
</p>

在浏览器却变成这个样子：

请问这是为何？

Answer 1

主要是因为 p里面不能包含块级元素。
详解如下：

这是块级元素的特点：

参考：w3.org