table 里面 div ul li 怎么排版呀

Question

我的代码贴出来
这是结构部分

    <tr>
                                            <td width="15%" nowrap align="right" height="100">取穴:</td>
                                            <td colspan="3" id="xueweiTd">
                                                <div id="nav">

                                                    <ul id="xueweiList"></ul>
                                                    <input id="xueweis" name="xueweis">

                                                </div> 
                                            </td>

                                        </tr>

这是css样式部分

 <style type="text/css">
.ul, li {
    list-style: none;
}

#nav li {
    display: inline-block;
    margin: 0 5px;
    background: #ccc;
    padding: 0px 0px;
    line-height: 24px;
    font-size: 12px;
    float:left;
}

#nav li.h_nav_over {
    background: red;
    color: #fff;
}

#nav li.h_nav_over a {
    color: #fff;
}

a {
    text-decoration: none;
}
</style>

想实现这样的效果：

Answer 1

能说清楚点怎么分布么，这个样子不知道需求就不知道怎么弄呀。