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

【问题标题】：getting a horizontal list to align top of html table css获取水平列表以对齐 html 表格 css 的顶部
【发布时间】：2013-02-17 09:12:23
【问题描述】：

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;
    }

【问题讨论】：

表格用于数据而非布局。以这种方式使用表在语义上是不正确的。
很公平。我应该使用什么？
标签如div, span, header, footer, nav, section, article, aside.
@jimjimmy1995 这将很有用，因为您提出了它，以展示如何使用 CSS 重现 OP 对表格所做的事情，而不仅仅是列出标签的类型。
@popnoodles 我不是来为他们制作网站的，只是为了引导他们朝着正确的方向前进。

标签： html css alignment html-table horizontallist

【解决方案1】：

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

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

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

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

我已将表格宽度设置为 100%，因为您一直向右指定 " 和 'items'。"

【讨论】：