html - 获取水平列表以对齐 html 表格 css 的顶部

Question

n00b 试图在页面顶部创建一个简单的导航栏。我无法在表格单元格的顶部对齐水平列表。

具体来说，我不想让“项目 1”和“项目 2”在表格顶部对齐。最终，我想要“Logo Here”部分一直到左边，“items”一直到右边。

当然，我现在只满足于让“项目”在顶部对齐。

html:

    <table cellpadding="0" border="1">
        <tr> 
           <td valign="top">Logo Here</td>
           <td valign="top">Total Accounts:   Logged On:   Last Updated:</td>
           <td>
              <ul id="navlist">
                   <li><a href="#">Item 1</a></li>
                   <li><a href="#">Item 2</a></li>
              </ul>
           </td>
       </tr>
     </table>

CSS：

    #navlist li
    {
        display: inline;
        list-style-type: none;
        padding-right: 20px;
        vertical-align: text-top;
    }

Answer 1

我们不应该使用表格进行布局，但这是所提问题的解决方案。

uls 默认有填充和边距。尝试删除它

#navlist {
    padding:0;
    margin:0;  
    float:right; /* and to get the items to the right */
}

示例：http: //jsfiddle.net/vQvvZ/

我已将表格宽度设为 100%，因为您一直向右指定“和”项目。”