如何用HTML+CSS将导航列表置于页面右上方？

直接给你可用的HTML和CSS代码，同时说明关键要点：

HTML 代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>导航示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 导航容器 -->
    <nav class="top-nav">
        <ul class="nav-list">
            <li><a href="#">Home</a></li>
            <li><a href="#">Archives</a></li>
        </ul>
    </nav>

    <!-- 页面其他内容 -->
    <main>
        <p>页面主体内容</p>
    </main>
</body>
</html>

CSS 代码（两种可选方案） #

方案1：Flex布局（推荐，适配响应式） #

/* 重置默认样式，避免浏览器自带的margin/padding干扰 */
* {
    margin: 0;
    padding: 0;
    list-style: none;
}

.top-nav {
    /* 让导航容器占满整个宽度 */
    width: 100%;
    /* 内边距调整导航与页面边缘的距离 */
    padding: 15px 20px;
    /* 背景色方便区分，可自行修改 */
    background-color: #f5f5f5;
    /* 使用flex布局，将子元素靠右对齐 */
    display: flex;
    justify-content: flex-end;
    box-sizing: border-box; /* 确保padding不会撑宽容器 */
}

.nav-list {
    /* 让导航项横向排列 */
    display: flex;
    gap: 30px; /* 导航项之间的间距 */
}

.nav-list a {
    text-decoration: none;
    color: #333;
    font-size: 16px;
}

方案2：绝对定位方案 #

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

body {
    /* 给主体内容留顶部空间，避免被导航遮挡 */
    padding-top: 60px;
}

.top-nav {
    /* 绝对定位到页面右上角 */
    position: absolute;
    top: 0;
    right: 20px;
    padding: 15px 0;
}

.nav-list {
    display: flex;
    gap: 30px;
}

.nav-list a {
    text-decoration: none;
    color: #333;
    font-size: 16px;
}

你之前代码无效的常见原因 #

• 没有重置浏览器默认的margin/padding，导致列表自带缩进或外边距
• 导航容器没有设置合适的宽度或布局方式，无法支撑子元素靠右对齐
• 使用绝对定位时，没有给页面主体添加顶部内边距，导致内容被导航遮挡

内容的提问来源于stack exchange，提问作者F Elisabeth