Question

如果可能给出屏幕空间，我想并排显示多个选项按钮，即 MC1 MC2 MC3 MC4

但是如果不可能并且至少有一个元素必须换行，那么它们应该被包裹

MC1  
MC2  
MC3  
MC4

而不是

MC1 MC2 MC3

MC4

我之所以想要这种不同寻常的行为：我们在心理调查中经常有很多选择，重要的是评定量表的终点在视觉上彼此远离，以强调它们是量表的不同目的。我们希望尽可能采用水平布局，但如果最后一个元素包装，则意味着两个端点靠得很近。

调查布局流畅，当然儿童的宽度不明。孩子们通常只包含文字。它们可能包含图像，但如果有人认为计算字符并使用width:32ex的解决方案实际上是可行的，那就更好了（即JS重排）。

我知道我可以轻松地用JS做到这一点，但我想知道是否有一个技巧我不知道只用CSS做这个。

Answer 1

<强>更新

还有另一种解决方案是text-align：justify;在包装器和显示器上：内部元素的内联块。可能是最好的解决方案。

干杯，菲利克斯

如果您不想使用JS，答案是媒体查询：）

如果您的孩子数量相同，那么我会选择（如果您有4个孩子）

radio-wrapper .children {
width: 25%;
float: left;
}

并添加一个媒体查询（例如），当您达到600px时，它们会垂直对齐

@media screen and (max-width: 600px) {
    radio-wrapper .children {
        width: 100%;
        float: none;
    }
}

Answer 2

使用纯CSS可以做的最好的事情就是使用媒体查询来强制元素在某个断点之上时都在同一行上。

http://jsfiddle.net/FpuHc/1/

@media (min-width: 30em) {
    ul {
        display: table;
        padding: 0;
    }

    li {
        display: table-cell;
    }
}

<ul>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
</ul>

如果儿童无法使用CSS并排显示，请将所有儿童包起来

2 个答案: