包裝所有兒童的兒童不能使用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

回答

相關問題