Question

PLAYGROUND HERE

如果它们适合单排，我想以不同方式设置单选按钮的样式。例如：

enter image description here

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

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

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

如果没有，Javascript＆＃34; hack＆＃34;很受欢迎。

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中：

应用buttons课程。
使用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');
    }
  });
}

Updated JSBin

Answer 2

我无法想到仅限CSS的解决方案，但您可以使用JS来测试这些项目是否适合连续并应用＆＃39;无线电＆＃39;或者按钮＆＃39; classname相应：

原谅我粗糙的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-希区柯克）。但是，虽然代码更优雅，但不考虑容器的padding。

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

Answer 3

如果我理解您正确提出的问题，则可以将<div ng-app ng-controller="MyCtrl"> <table style="width:50%"> <tr> <th>NAME</th> <th>C1</th> <th>C2</th> </tr> <tr ng-repeat="(name,age) in items"> <td>{{name}} </td> <td> {{age.c1}}</td> <td> {{age.c2}}</td> </tr> </table> </div> <table style="width:100%"> </table>部分更改为flex-direction而不是row。这将使它们在盒子内对齐。

你必须做更多的样式才能正确地让标签以你想要的方式显示，但这应该把它们放在你的行中。 I've updated the playground with my changes

Answer 4

请尝试以下示例.............. ------------ ----------- HTML

<html>
<head>
 <link rel="stylesheet" href="style.css" type="text/css" /> 
</head>
<body>
    <div class="table-row">
        <div class="col">
                <input type="Radio">This
            </div>
            <div class="col" style="padding-top: 2px;">
                <input type="Radio">Is
            </div>  

            <div class="col">
                <input type="Radio">Simply
            </div>
            <div class="col" style="padding-top: 2px;">
                <input type="Radio">Possible
            </div>  

        </div>  
</body>
</html>

------- CSS -------------

.table-row{  
     display:table-row;     
     /* text-align: center; */
}
.col{
    display:table-cell;
    /* border: 1px solid #CCC; */
}

Answer 5

测试宽度是否有效，然后在必要时删除单选按钮图标并替换为图形或形状？

.checkbox {
    display:none;
}

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

这可能不是那么简单，但我用它作为复选框，它似乎适用于那种情况。

Answer 6

您只能通过使用css而不需要编写脚本来实现此目的。

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

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

CSS：在CSS中，我们必须隐藏单选按钮，以便只显示文本。当用户点击文本时，它实际上是单击单选按钮。

div lable input#a1{
   display:none;
}

Answer 7

只有漂亮的解决方案CSS，但你必须知道行中的最大元素数量。它基于计数器，但不是实际尺寸。

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

如果金额少于或等于4：

[
    {
     "offset":1,
      "result":
             [
              {
                "host":"x.x.x.x",
                 "count":"123"
               }
             ]
           },
    {"offset":2,"result":[{"host":"y.y.y.y","count":"1123"}]}
]

如果金额超过4：

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

试试这个：http://jsbin.com/fozeromezi/2/edit（只需删除/添加div）

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

7 个答案: