Javascript 如果单选按钮放在一行中，如何设计不同的样式？

如果单选按钮放在一行中，我想改变它们的样式。例如：

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

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

只有使用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才有很好的解决方案，但您必须知道行中元素的最大数量。它是基于计数器，但不是基于实际大小

例如，如果您确定可以将4个元素放入一行，则在任何情况下，都可以使用以下选择器：

如果金额大于或等于4：

div:nth-last-child(-n+5):first-child,
div:nth-last-child(-n+5):first-child ~ div {
    }

如果金额超过4：

div:nth-last-child(n+5),
div:nth-last-child(n+5) ~ div {
}

---

试试这个：（只需删除/添加div）

如果我正确理解您的要求，您可以将

弹性方向部分更改为
行，而不是
列。这将导致它们在框内对齐

您必须进行更多的样式设置，以正确地使标签以您想要的方式显示，但这应该会为您将它们放入行中
 我想不出一个只使用CSS的解决方案，但您可以使用JS来测试项目是否适合一行，并相应地应用“单选”或“按钮”类名：

请原谅我粗糙的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();

var containers=document.querySelectorAll（“.container”），
测试=函数（）{
对于（i=0；iif（ow在CSS中是不可能的，但不需要太多JavaScript

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

在JavaScript中：

应用
按钮
类
用于确定
.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');
    }
  });
}

var container=document.querySelector（'.container'），
lastChild=document.querySelector（'.container>：last child'），
paddingRight=parseInt（window.getComputedStyle（容器，null）.getPropertyValue（'padding-right'）），
定时器；
window.onresize=函数（）{
清除超时（计时器）；
计时器=设置超时（函数（）{
container.classList.remove（'radio'）；
container.classList.add（'buttons'）；
if（container.getBoundingClientRect（）.right paddingRight<
lastChild.getBoundingClientRect（）.right）{
container.classList.add（'radio'）；
container.classList.remove（'buttons'）；
}
});
}

试试下面的例子。。。。。。。。。。。。。。
------------HTML-----------

如果必要的话，移除单选按钮图标并替换为图形或形状，测试宽度是否有效

.checkbox {
    display:none;
}

.label {
    display: inline-block;
    height: 20px;
    background: url('picture.png');
}

它可能没有那么简单，但我使用它作为复选框，在这种情况下它似乎可以工作。
您可以通过使用css实现这一点，而无需编写脚本

HTML：您必须将输入放在包含文本的标记中

<div>
<label for="a1">
    <input id="a1" type="radio" name="radio">Yes,
</label>  </div>

虽然JS Bin复制的链接非常受欢迎，但您必须在问题本身中发布相关代码，以防止链接腐烂。如果您的目标是提供演示（再次：非常受欢迎！），那么您可以简单地使用堆栈溢出的“”功能。恐怕您误解了这个问题。在我的示例中，有两个容器。其中一个容器有类
单选
，另一个容器有
按钮
。我不希望容器上有这些类。我添加这些类只是为了演示目的。问题是如何创建演示中看到的行为，而不添加其他属性手动删除这些类。啊，好的。我现在明白了。我会相应地更新我的答案…但是如果元素的宽度未知或不相等，我们无法知道可以容纳多少个。这取决于情况。您可以始终将“溢出省略号”与“显示内联块”结合使用和固定宽度。这就是为什么我提到，这个答案只适用于某些条件，但它是纯CSS。很好的解决方案。不知道
flex-shrink
（在我的大部分工作中仍然避免使用flex-box）。我用它来改进我自己的答案。谢谢。@Rick Nice！我试图在每次调整窗口大小时都运行你的JS，但我看到一种奇怪的闪烁效果：知道怎么回事吗？
onresize
在调整大小时不断运行。最好添加一个超时。请参阅@rickhichcock上的更新现在不闪烁，但我仍然可以看到不希望出现的行为：（应该是单选按钮）我已经从
scrollWidth
切换到
getBoundingClientRect
。这解决了问题。@humble.rumble.6x3同意，更新版本（v5）没有考虑填充，但是代码示例（以及到v3的链接）考虑了。我已经更新了我的答案以反映这一点。谢谢。
.table-row{  
     display:table-row;     
     /* text-align: center; */
}
.col{
    display:table-cell;
    /* border: 1px solid #CCC; */
}

.checkbox {
    display:none;
}

.label {
    display: inline-block;
    height: 20px;
    background: url('picture.png');
}

<div>
<label for="a1">
    <input id="a1" type="radio" name="radio">Yes,
</label>  </div>

div lable input#a1{
   display:none;
}