3

ユーザーに表示したい結果のリストがあります。次のようになります。

勝ち：1 | 15 | 33 |

負ける：7 | 65 | 100 |

これで、番号はすべて順序付けられていないリストに含まれ、デザインはほぼ正常に機能します。問題は、上記のように、これらの数字の1つが3桁になる可能性があることです（上下に揃えてほしい）。

だから私はli使用して要素のサイズを変更しようとします

#my_list li
{
    width: 100px; /*Exmaple width*/
}

これは何もしないようですので、私は周りを見回して、ナビゲーションバーのチュートリアルをたくさん見つけました。これらは<a>タグのサイズ変更を示していますが、これらの番号へのリンクはありません。

だから私の質問は、liタグ自体の幅を変更する方法はありますか？そうでない場合は、これらの数値をラップして、リンクのタグと同じようにその要素のサイズを変更するのに意味的に適したHTML5タグがありますか？

助けてくれてありがとう。

4

3 に答える 3

2

あなたが説明しているのは、ではなく、を必要とする古典的なTABLEケースです UL。テーブルを使用すると、セルが自動的に展開されてコンテンツが含まれるため、桁数に関係なく完全な配置が保証されます。

編集：一貫性のない番号については。TDそれぞれのの、TRこの単純なフィドルを見てください。ここでは、テーブルがない場合でもテーブルがどれほど柔軟であるかを確認できます。各行のTDの数は異なります。COLSPANさらに、このような不整合はHTML属性で簡単に修正できます。つまり、どの行に最も多くTDのが含まれているかがわかり、これが列の総数になります。次に、（（TOTAL-ACTUAL）+1）を計算し、この値を最後のTDとして渡しますCOLSPAN。

于 2012-12-05T10:06:11.323 に答える
2

またはに使用display:inline-block float:left

このCSSを試してください

#my_list li
{
    min-width: 100px; /*Exmaple width*/

}

または定義しないでくださいwidth

#my_list li
{
padding:0 10px;
display:inline-block;
vertical-align:top;
 }
于 2012-12-05T09:57:47.107 に答える
1

Uはそれを入れて、それのためにdisplay:inline-block設定するwidth必要があります、

これが実際の例です：デモリンク

于 2012-12-05T10:06:11.823 に答える