Multi-line items using UL & LI

You want to show the item list in a frame and each item has it's own frame as well. The end result looks like this:

The CSS to achieve the above:

• item_box - this is the class for the DIV. If the "overflow" setting is missing, the blue color DIV frame might not work in Firefox.
• item - this is the class for the UL.
• item li - this is the class for the LI.
• item span - this is the class for the SPAN (to control the text/content effect). If you are displaying the text with spaces, the spaces have to be replaced by " " so that it won't fall apart!

    <style type="text/css">
        .item_box
        {
            border: 1px solid blue;
            width: 400px;
            vertical-align: middle;
            overflow: hidden;
        }
        .item
        {
            list-style-type: none;
            min-height: 30px;
        }
        .item li
        {
            float: left;
            padding: 2px;
        }
        .item li span
        {
            border: 1px solid gray;
            display: inline-block;
            padding: 2px;
        }
    </style>