如果它们适合单排,如何设置单选按钮的样式？

Question

这里的游乐场

如果它们适合单排,我想以不同的方式设置单选按钮的样式.例如:

第一个容器没有足够的空间来容纳单行中的所有单选按钮.因此,它们作为普通单选按钮垂直显示.

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

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

如果没有,Javascript"hack"是受欢迎的.

这里的游乐场

---

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. 申请buttons上课.
2. 使用Element.getBoundingClientRect确定最后一个子节点.container是否超出范围.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');
    }
  });
}

更新了JSBin

Answer 2

我不能想到只有CSS的解决方案,但你可以使用JS测试这些项是否适合连续并相应地应用'radio'或'buttons'类名:

原谅我粗糙的JS - 它不优雅,只适用于现代浏览器,但你明白了:

var containers = document.querySelectorAll(".container"),
test = function(){
    for (i = 0; i < containers.length; ++i) {
      var container = containers[i],
          divs = container.querySelectorAll("div"),
          iw = 0;
      container.classList.remove("radio");
      container.classList.add("buttons");
      //get the sum width of the div
      for (d = 0; d < divs.length; ++d) {
        iw+=divs[d].offsetWidth;
      }
      var style = window.getComputedStyle(container, null);
      var ow = parseInt(style.getPropertyValue("width"));
      if(ow<=iw){
          container.classList.add("radio");
          container.classList.remove("buttons");            
      }
    }
};

window.onresize = function(event) {
    test();
};
test();

http://jsbin.com/zofixakama/3/edit?html,css,js,output
(调整窗口/面板大小以查看效果)

更新:如果你添加.container div {flex-shrink:0;}到样式JS可以更简单,因为我们不必测量div的组合宽度(感谢@ rick-hitchcock).但是,虽然代码更优雅,但不考虑容器padding.

请参阅:http://jsbin.com/zofixakama/5/edit？html,css,js,output