javascript - 如果单选按钮适合一行，如何设置不同的样式？

Question

PLAYGROUND HERE

如果单选按钮适合一行，我想采用不同的样式。例如:

第一个容器没有足够的空间来容纳一行中的所有单选按钮。因此，它们像普通单选按钮一样垂直显示。

第二个容器有足够的空间。因此，单选按钮显示为按钮。

是否有可能仅使用 CSS 实现此行为？

如果没有，欢迎使用 Javascript“hack”。

PLAYGROUND HERE

---

HTML

<div class="container radio">
  <div>
    <input id="a1" type="radio" name="radio">
    <label for="a1">Yes,</label>
  </div>
  <div>
    <input id="a2" type="radio" name="radio">
    <label for="a2">it</label>
  </div>
  <div>
    <input id="a3" type="radio" name="radio">
    <label for="a3">is</label>
  </div>
  <div>
    <input id="a4" type="radio" name="radio">
    <label for="a4">possible</label>
  </div>
  <div>
    <input id="a5" type="radio" name="radio">
    <label for="a5">to</label>
  </div>
  <div>
    <input id="a6" type="radio" name="radio">
    <label for="a6">achieve</label>
  </div>
  <div>
    <input id="a7" type="radio" name="radio">
    <label for="a7">this</label>
  </div>
</div>
<div class="container buttons">
  <div>
    <input id="b1" type="radio" name="buttons">
    <label for="b1">Yes,</label>
  </div>
  <div>
    <input id="b2" type="radio" name="buttons">
    <label for="b2">it</label>
  </div>
  <div>
    <input id="b3" type="radio" name="buttons">
    <label for="b3">is</label>
  </div>
  <div>
    <input id="b4" type="radio" name="buttons">
    <label for="b4">possible</label>
  </div>
</div>

CSS(更少)

.container {
  display: flex;
  width: 220px;
  padding: 20px;
  margin-top: 20px;
  border: 1px solid black;

  &.radio {
    flex-direction: column;
  }

  &.buttons {
    flex-direction: row;

    > div {
      input {
        display: none;

        &:checked + label {
          background-color: #ADFFFE;
        }
      }

      label {
        padding: 5px 10px;
        margin: 0 1px;
        background-color: #ccc;
      }
    }
  }
}

Answer 1

在 CSS 中不可能，但它不需要太多的 JavaScript。

在 CSS 中，将 flex-shrink: 0 添加到 > div。这将防止 .container 的子级缩小到小于它们的范围。

在 JavaScript 中:

1. 应用按钮类。
2. 使用Element.getBoundingClientRect确定 .container 的最后一个 child 是否在 .container 的范围之外。如果是这样，请切换到 radio 类。 (您还需要考虑正确的填充。感谢@Moob 指出这一点。)

Javascript

var container = document.querySelector('.container'),
    lastChild= document.querySelector('.container > :last-child'),
    paddingRight= parseInt(window.getComputedStyle(container, null).getPropertyValue('padding-right')),
    timer;

window.onresize = function() {
  clearTimeout(timer);
  timer= setTimeout(function() {
    container.classList.remove('radio');
    container.classList.add('buttons');
    if (container.getBoundingClientRect().right-paddingRight <
        lastChild.getBoundingClientRect().right) {
      container.classList.add('radio');
      container.classList.remove('buttons');
    }
  });
}

Updated JSBin