包装所有儿童的儿童不能使用CSS

显示并排侧我想显示多个选择按钮并排侧，如果可能给出的屏幕房地产，即。
MC1 MC2 MC3 MC4包装所有儿童的儿童不能使用CSS

，但如果它是不可能的，至少一个元件具有包裹，他们都应该被包裹的 MC1 MC2 MC3 MC4

原因

MC1 
MC2 
MC3 
MC4

，而不是我想这个不寻常的行为：我们经常在我们的心理调查，许多选择，其中重要的是，以评估等级的终点是从视觉上相互遥远强调的是，他们是不同规模的目的。我们更喜欢在可能的情况下使用水平布局，但如果最后一个元素换行，则意味着两个端点靠得很近。

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

我知道我可以很容易地用JS做到这一点，但我不知道是否有一个小窍门，我不知道只能用CSS来做到这一点。

来源

2013-04-09 Ruben

你可以用纯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-09 15:51:02 cimmanon

这是更好的，因为它[允许可变宽度]（http://jsfiddle.net/qYWpD/）的孩子。无论如何，我可能不得不使用媒体查询和一些固定的父宽度来使它看起来不错。谢谢！如果没有人提出父母和孩子的宽度可变的解决方案，将接受。 – Ruben 2013-04-09 16:08:13

UPDATE：

没有与文本对齐另一种解决方案：证明;在包装器上显示：内部元素的内联块。可能是最好的解决方案。

干杯，菲利克斯

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

如果您的孩子是在数量上相同的话，我会去（如果你有4名儿童）

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

，并添加一个媒体查询（例如）使得当你REAC它们垂直对齐^ h 600px的

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

来源

2013-04-09 15:27:21

+1这是不完美的，在你随意在什么时候改变了布局选择（和分配一个特定的宽度每个子元素）...但我不相信还有其他方法可以做到这一点。也许有更多关于内容的信息，以及目标是什么，这可以得到改善。 – CherryFlavourPez 2013-04-09 15:32:48

这不行。如果孩子的宽度不是可变的（即适合他们的内容，兄弟姐妹的不同宽度）并且已知，我只能使用它。我怎么知道在媒体查询中为max-width选择什么值？ – Ruben 2013-04-09 15:33:35

当然，这是一个更加静态的解决方案 - 显然我跳过了通用宽度的部分 - sry。上面的自适应脚本将您的孩子变成表格元素是最好的答案。 – 2013-04-12 08:16:11

包装所有儿童的儿童不能使用CSS

回答

相关问题