如何水平放置表单连续？

如何解决如何水平放置表单连续？

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

我的观点 business.blade.PHP

{% assign urlslug = page.url | remove:'.html' | remove_first:'/' | split: '/' %}
  {% assign urlfolder = urlslug[0] %}
  {% assign urlfilename = urlslug[1] %}
  <p>folder: {{urlfolder}}</p><p>filename: {{urlfilename}}</p>
  <h2>{{post_slug}}</h2>

  {% if site.data.comments.recipes[urlfilename] %}
        <!-- Start static comments -->
        <div id="comments" class="js-comments">
          <h2 class="page__section-label">
            {% if site.data.comments.recipes[urlfilename].size > 1 %}
              {{ site.data.comments.recipes[urlfilename] | size }}
            {% endif %}
            Comments test 1
          </h2>
          <h2> {{ site.data.comments.recipes[urlfilename] }} </h2>
    {% assign comments = site.data.comments.recipes[urlfilename] | sort | where_exp: 'entry','comment[1].replying_to_uid == blank' %}
    <h3>a: {{ comments }} </h3>
    <h3>b: {{ comments[0] }} </h3>
    {% for comment in comments %}
      <h3>comment test 2</h3>
      {% assign index       = forloop.index %}
      <!-- {% assign replying_to = comment[1].replying_to | to_integer %}
      {% assign avatar      = comment[1].avatar %} -->
      {% assign email       = comment[1].email %}
      {% assign name        = comment[1].name %}
      {% assign url         = comment[1].url %}
      {% assign date        = comment[1].date %}
      {% assign message     = comment[1].message %}
      {%- assign uid             = comment[1]._id %}
      {% include comment.html index=index replying_to=replying_to avatar=avatar email=email name=name url=url date=date message=message %}
    {% endfor %}
    </div>
    <!-- End static comments -->
  {% endif %}

解决方法

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>

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