コントロールのグループをcshtml/razorの単位としてラップする方法は？

Question

私のHTMLはかなり錆びています。基本的には、アイテムのリスト（データテーブルから）を取得し、ロードされたアイテムテキストとラジオボタンを追加し、ユーザが選択するアイコンを追加しています。ラジオボタン、付随するテキスト、およびアイコンをグループとしてラップすることを除いて、すべてが問題ありません。一例として、

は、多くの選択肢を持つ小さな画面上で、それは次のように表示されます。

<O> Item One <icon> <O> Item Two <icon> <O> Item Three 
<icon> <O> Item Four <icon> <O> Item Five <icon> <O> 
Item Six <icon> 

しかし、私はそれは私のグループでラップしたい、もっとこのような：

<O> Item One <icon> <O> Item Two <icon> 
<O> Item Three <icon> <O> Item Four <icon> 
<O> Item Five <icon> <O> Item Six <icon> 

そして、もちろんラベルの大きさは一様ではなく、ブレークを動的にしたいので、ユーザーが大きなモニターを使用している場合は、項目はすべて1行または2行などになります。

下がる私は各グループを包むことができ、グループ内で折り返しを解除し、グループ間で強制的に折り返すことができる要素はありますか？

Answer 1

spanタグで各グループをCSSスタイルwhite-space: nowrapでラップします。これにより、同じグループ内のすべての要素が同じ行に置かれますが、ブラウザーはグループをレイアウトできます。