1

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

但如果这是不可能的并且至少一个元素必须包装，它们应该全部被包装

MC1  
MC2  
MC3  
MC4

代替 MC1 MC2 MC3
MC4

我想要这种不寻常行为的原因：在我们的心理调查中，我们经常有很多选择，重要的是评级量表的端点在视觉上彼此远离，以强调它们是量表的不同端点。我们更喜欢在可能的情况下使用水平布局，但如果最后一个元素环绕，则意味着两个端点靠得很近。

调查布局是流动的，当然孩子们的宽度是未知的。孩子通常只包含文本。它们可能包含图像，但如果有人认为计数字符和使用的解决方案width:32ex实际上是可行的，那总比没有好（即 JS 重排）。

我知道我可以很容易地用 JS 做到这一点，但我想知道是否有一个我不知道的技巧只用 CSS 来做到这一点。

4

2 回答 2

3

更新：

还有另一种解决方案 text-align:justify; 在 wrapper 和 display: inline-block 里面的 Elements。可能是最好的解决方案。

干杯，菲利克斯

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

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

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

并添加一个媒体查询（例如）使它们在达到 600 像素时垂直对齐

@media screen and (max-width: 600px) {
    radio-wrapper .children {
        width: 100%;
        float: none;
    }
}
于 2013-04-09T15:27:21.880 回答
1

使用纯 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>
于 2013-04-09T15:51:02.207 回答