Laravel 5.6 实现会员详情横向展示而非纵向排列

嘿，这个问题很常见！你现在看到纵向排列是因为<p>标签是块级元素，默认会独占一行。要让会员信息横向展示，咱们可以从HTML结构和CSS布局两个方面调整，给你两种简单的方案：

方案1：替换块级元素为行内元素 #

把默认换行的<p>标签换成行内元素（比如<span>），这样内容就会在同一行显示，再给每个会员信息加个换行符<br>来区分不同会员：

@foreach($member as $members)
    <a href="{{ url('members', $members->id) }}" class="member-item">
        <span>{{ $members->name }}</span>
        <span>{{ $members->surname }}</span>
        <span>{{ $members->id_number }}</span>
        <span>Submitted on: {{ $members->created_at }}</span>
    </a>
    <br>
@endforeach

如果想让字段之间有间距，可以加一点CSS美化：

.member-item span {
    margin-right: 18px; /* 调整字段间的间距 */
}

方案2：用Flexbox布局（更灵活） #

通过CSS的Flexbox来控制容器的排列方式，这种方法更适合后续样式扩展：

首先修改Blade代码，给每个会员的链接加一个类名：

@foreach($member as $members)
    <a href="{{ url('members', $members->id) }}" class="member-card">
        <div class="field">{{ $members->name }}</div>
        <div class="field">{{ $members->surname }}</div>
        <div class="field">{{ $members->id_number }}</div>
        <div class="field">Submitted on: {{ $members->created_at }}</div>
    </a>
@endforeach

然后添加CSS样式，让.member-card变成Flex容器：

.member-card {
    display: flex;
    gap: 20px; /* 字段之间的间距 */
    margin-bottom: 12px; /* 不同会员之间的行间距 */
    align-items: center; /* 让内容垂直居中 */
}

另外提个小优化：Laravel的url()函数可以直接传第二个参数作为路由参数，不需要用array()包裹，所以url('members', array($members->id))可以简化成url('members', $members->id)，写法更简洁。

内容的提问来源于stack exchange，提问作者jproux