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

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 执行此操作，您需要首先确定应该有多少列。如果您在知道列数之前尝试设置宽度，您可能最终会把输入推到最后并搞砸了。

我计算列数的方法是将它们全部排成一行。对于每种可能性，我将最大列宽(和其他额外空间)相加并检查总数是否大于可用空间。如果总数更大，那么我减去一列再试，从而保证最大列数。

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

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