如何水平放置表格（连续）？

Question

我有一个表格，我尝试自己做但没有找到如何使字段连续（水平）。非常感谢，因为我花了很多时间也没有找到解决办法。

我的观点business.blade.php

@extends('layouts.layout')
@section('title')Бізнес@endsection
@section ('main_content')
    <h1>Бизнес</h1>
    <p>
    <table class="table table-dark">
            <thead>
              <tr>
                <th scope="col">Name</th>
                <th scope="col">Mail</th>
                <th scope="col">Website</th>
                <th scope="col">Delete</th>
              </tr>
            </thead>
            <tbody>
                @foreach ($business as $singleBusiness)
                <tr>
                    <td>{{ $singleBusiness->name}}</td>
                    <td>{{ $singleBusiness->mail}}</td>
                    <td>{{ $singleBusiness->website}}</td>
                    <td><a href="/delete/{{ $singleBusiness->id }}">
       <button class="btn btn-danger btn-delete">Delete</button></a></td>
              </tr>
              @endforeach
            </tbody>
        </table>
    </p>
    <form method="post" action="/business">
        {{ csrf_field() }}
        <fieldset>
                <div class="form-row align-items-center">
                    <div class="col-sm-3 my-1">
            <label for="name" class="sr-only"></label>
            <input type="text" class="form-control" id="name" name="name" placeholder="Name">
        </div>
                        <div class="col-sm-3 my-1">
            <label for="mail" class="sr-only"></label>
            <input type="text" class="form-control" id="mail" name="mail" placeholder="Mail">
        </div>
                            <div class="col-sm-3 my-1">
            <label for="website" class="sr-only"></label>
            <input type="text" class="form-control" id="website" name="website" placeholder="Website">
        </div>
        <button type="submit" class="btn btn-outline-warning mb-2">Додати</button>
                </div>
        </fieldset>
    </form>
@endsection

Answer 1

CSS:

.container {
    display: flex;        // Distribute horizontally
    flex-wrap: wrap;      // If elements overflow the width of the container, put below
    align-items: center;  // Align items vertically
}

这将使容器水平分布其内容。 "align-items: center" 样式是可选的，它将垂直对齐元素。

我看到你使用表格，我不建议使用表格，它们的响应速度很糟糕。而是使用 flex，像这样：

<style>
.row {
    display: flex;   // Distribute horizontally
}

.row > .column {
    flex: 1;    // All columns same width
    // or
    flex: 0 0 25%;   // Each column 25%
}
</style>

<div class="row">
    <div class="column">Name</div>
    <div class="column">Mail</div>
    <div class="column">Website</div>
    <div class="column">Delete</div>
</div>

<div class="row">
    <div class="column"><input></div>
    <div class="column"><input></div>
    <div class="column"><input></div>
    <div class="column"></div>
</div>

您也可以使用 bootstrap 行和列，但我会解释如何自己完成相同的操作。

如何水平放置表格（连续）？

How to place the form horizontally (in a row)?

html

forms

laravel-blade

bootstrap-4