带有标签+字段单元的表格可以包装,但在包装时可以很好地排列

Question

我有一个流体设计的表格,由一系列标签和字段组成,我希望它们一个接一个地流动,并在必要时包裹以支撑窗口的宽度.(标签和输入必须作为一个单元流动,在一行的末尾没有悬挂标签,其输入在下一行.)但是当它们换行时,我希望这些字段以整齐的方式排列.有没有办法用HTML和CSS做到这一点？(不幸的是,我必须支持没有CSS3列的旧浏览器[如果他们甚至在这里帮助].)

我尝试了几件事,比如给标签(好吧,跨度)一个固定长度(你要点击代码片段中的"全屏"按钮,这样片段窗口宽度不固定):

.wrapped-fields label {
  display: inline-block;
}
.wrapped-fields label > span {
  display: inline-block;
  width: 8em;
  white-space: nowrap;
}

<form class="wrapped-fields">
  <label>
    <span>Short:</span>
    <input type="text" size="5">
  </label>
  <label>
    <span>Long label for field:</span>
    <input type="text" size="5">
  </label>
  <label>
    <span>Medium label:</span>
    <input type="text" size="5">
  </label>
  <label>
    <span>Short:</span>
    <input type="text" size="5">
  </label>
  <label>
    <span>Long label for field:</span>
    <input type="text" size="5">
  </label>
  <label>
    <span>Medium label:</span>
    <input type="text" size="5">
  </label>
</form>

......但由于以下几个原因,这是不能令人满意的:

1. 它要求我为标签跨度设置固定大小,但这些标签的名称可以来自配置,因此我不希望在运行时测量每个标签并将固定大小调整为最大.

2. 当它们堆叠在每列中最长的标签时看起来没问题:

   

   ......但是当它们不是时很可怕,例如:

   

   ...要么:

   

理想情况下,每个"列"将采用其中最长标签或字段的大小(尽管现在所有字段的大小相同),相应地,标签+字段对包装.

如果没有HTML/CSS解决方案,是否有一个简单的JavaScript解决方案？(如果没有,我会写一个复杂的;不要求人们做大量的代码,如果那就是它.)

如果相关:

• 我正在使用Bootstrap,所以如果网格系统有帮助(我没有运气),我们可以使用它

• 如果我们需要JavaScript解决方案,我正在使用jQuery

Answer 1

警告：此解决方案使用 JavaScript

要使用 JavaScript 执行此操作，您需要首先确定应该有多少列。如果您在知道列数之前尝试设置宽度，则最终可能会将输入推到末尾并变得混乱。

我计算列数的方法是从将它们全部放在一行中开始向后计算。对于每种可能性，我将最大列宽（和其他额外空间）相加，并检查总数是否大于可用空间。如果总数更大，那么我减去一列并重试，从而保证列数的最大值。

最后，当我有了解决方案时，我将style.width每个列设置span为该列的最大宽度，以便label每列中的所有 s 大小相同。

一个问题是，如果第一列比其他列窄得多，则该列中除第一个元素之外的所有元素都可能无法正确换行。为了解决这个问题，我从可用空间中减去一行中元素的总宽度，然后将每行中margin-right最后一个元素的宽度设置label为该数字（为了安全起见，减去 4 像素）。

下面是一个工作示例。继续全屏显示并调整其大小；我有一个resize事件处理程序，所以它应该可以工作。

jQuery(function($) {
  var availableWidth;
  var $elements = $('.wrapped-fields span');
  var widths = [];

  $elements.each(function setWidth() {
    widths.push($(this).width());
  });

  var inputWidth = $elements.first().parent().width() - widths[0];

  function getMaxWidth(size, column) {
    var max = 0;
    var row = 0;
    var length = widths.length;
    var index = column + (size * row);


    while (index < length) {
      width = widths[index];

      if (width > max) {
        max = width;
      }

      row++;
      index = column + (size * row);
    }

    return max;
  }

  function tryGroup(n) {
    // Start with inline-block space
    var total = 4 * (n - 1);
    var maxWidths = [];
    var w;

    var i = 0;
    for (; i < n; i++) {
      w = getMaxWidth(n, i);
      total += w + inputWidth;
      maxWidths.push(w);
    }

    if (total < availableWidth) {
      return [maxWidths, total];
    }
  }

  function alignColumns() {
    // Set the global available width
    availableWidth = $('.wrapped-fields').width();

    var i = widths.length;
    var result;

    for (; i > 0; i--) {
      result = tryGroup(i);

      if (result) {
        break;
      }
    }

    if (!result) {
      console.log('Error: not enough space');
      return;
    }

    var maxWidths = result[0];
    var total = result[1];

    var size = maxWidths.length;
    var afterSpace = availableWidth - total - 4;

    $elements.each(function setWidths(index, el) {
      var width = maxWidths[index % size];
      var parent = el.parentElement;

      el.style.width = width + 'px';

      if (index % size === size - 1) {
        parent.style.marginRight = afterSpace + 'px';
      } else {
        parent.style.marginRight = '';
      }
    });
  }

  alignColumns();

  $(window).resize(alignColumns);
});

.wrapped-fields label {
  display: inline-block;
}

.wrapped-fields label>span {
  display: inline-block;
  width: auto;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<form class="wrapped-fields">
  <label>
    <span>Short:</span>
    <input type="text" size="5">
  </label>
  <label>
    <span>Long label for field:</span>
    <input type="text" size="5">
  </label>
  <label>
    <span>Medium label:</span>
    <input type="text" size="5">
  </label>
  <label>
    <span>Tiny:</span>
    <input type="text" size="5">
  </label>
  <label>
    <span>Longer label for field:</span>
    <input type="text" size="5">
  </label>
  <label>
    <span>Medium long label:</span>
    <input type="text" size="5">
  </label>
</form>