1

画面のスペースが許せば、複数の選択ボタンを並べて表示したいと思います。
MC1 MC2 MC3 MC4

ただし、それが不可能で、少なくとも 1 つの要素をラップする必要がある場合は、すべてラップする必要があります。

MC1  
MC2  
MC3  
MC4

それ以外の MC1 MC2 MC3
MC4

私がこの異常な動作を望む理由: 私たちの心理調査では、評価尺度の終点が互いに視覚的に離れていることが重要である場合に、尺度の異なる終点であることを強調するために多くの選択肢があることがよくあります。可能であれば水平レイアウトにすることをお勧めしますが、最後の要素が折り返されている場合は、2 つの端点が近くにあることを意味します。

アンケートのレイアウトは流動的で、もちろん子の幅は不明です。子には通常、テキストのみが含まれます。それらには画像が含まれる場合がありますが、文字をカウントして使用するソリューションが実際に実行可能であると誰かが考える場合、width:32exそれは何もないよりはましです (つまり、JS リフロー)。

JSでこれを簡単にできることは知っていますが、CSSだけでこれを行うには、私が知らないトリックがあるかどうか疑問に思っていました.

4

2 に答える 2

3

アップデート：

text-align:justify; を使用した別の解決策があります。ラッパーとディスプレイ: 内部の要素のインライン ブロック。最善の解決策かもしれません。

乾杯、フェリックス

JS を使用したくない場合、答えはMedia Queriesです:)

あなたの子供の数が同じなら、私は行くでしょう（あなたに4人の子供がいる場合）

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

（たとえば）600pxに達したときに垂直に整列させるメディアクエリを追加します

@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 に答える