Html 如何将列表移动到我的页面顶部_Html_Css

Html 如何将列表移动到我的页面顶部

html css

Html 如何将列表移动到我的页面顶部,html,css,Html,Css,大家好，我遇到了一个问题，我试图将分类TD中的数据推到TD的顶部，而不是集中在TD中。以下是我的网站链接：以下是我的HTML代码： <html> <head> <style> body { font-family: Verdana, Arial, Sans-serif; padding:0; margin:0; } #body { width:100%; margin:0 auto; padding:0px

大家好，我遇到了一个问题，我试图将分类TD中的数据推到TD的顶部，而不是集中在TD中。以下是我的网站链接：

以下是我的HTML代码：

<html>
<head>
<style>

body {
    font-family: Verdana, Arial, Sans-serif;
    padding:0;
    margin:0;
}

#body {
    width:100%;
    margin:0 auto;
    padding:0px;
    max-width: 768px;
}

#categories {
    float:top;
}

</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" bgcolor="lightgrey" id="body" border="1">

<tr>
<td colspan="2">
<img style="width:100%; max-width: 768px; padding:0px; margin:0px;" src="images/totempolebanner.gif">
</td>
</tr>

<tr>
<td style="width:80%;">
<h3>Newest Article</h3>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</td>
<td style="width:20%;">
<div id="categories"
<h4>Categories</h4>
<ul>
<li>News</li>
<li>Movies</li>
<li>Music</li>
<li>Video Games</li>
<li>Health</li>
</ul>
</div>
</td>
</tr>

</table>
</body>


身体{
字体系列：Verdana、Arial、无衬线字体；
填充：0；
保证金：0；
}
#身体{
宽度：100%；
保证金：0自动；
填充：0px；
最大宽度：768px；
}
#类别{
浮动：顶部；
}
最新文章


知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔出于谨慎，不能因为工作上的过失而将自己的劳动成果归为自己的劳动成果，也不能因为精英的贡献而将劳动和财富暂时归为他人所有。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔出于谨慎，不能因为工作上的过失而将自己的劳动成果归为自己的劳动成果，也不能因为精英的贡献而将劳动和财富暂时归为他人所有。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔出于谨慎，还必须为动物的劳动负责
为该表格单元格提供CSS，垂直对齐：top

（图像从小提琴上移除以便于查看）
试试看
#body td {
    vertical-align: top;
}

首先正确关闭div categories标签。然后你只需要给你的div一个绝对位置，和top 0px
#categories {
    position: absolute;
    top: 0px;
}

top
不是float