最近携わっている案件の中で...

[要件]
タグ一覧を表示するエリアがあり、そのエリアをborder : 1pxで囲いたい。
横width:25%(IE対策として23%くらい)×4つ、縦20px×4つのセルにタグが1つ1つ入る感じ。
といっても、tableは使わずに、ul,liで表現したい。

(html - example)

<div id="tag_show">
<ul class="tag_list">
<li>Tag</li>
<li>Tag</li>
<li>Tag</li>
....
</ul>
</div>

(css)

#tag_show {
border : 1px solid #000;
}

#tag_show ul.tag_list li {
float : left
width : 23%;
height : 20px;
}

とすると、floatさせているので、適切にborderを引くことができない。
かといって、
(css)

#tag_show {
border : 1px solid #000;
}

#tag_show ul.tag_list li {
 display : inline;
width : 23%;
height : 20px;
}

とすると、widthはブロックレベルのみに適用なので、
横に4つという要件に反してしまう。

どのように実現すべきかなのか、お分かりの方がいらっしゃれば、
是非お教えいただきたく思います。m(_ _)m