如何在Flex布局的div右上角定位菜单文本？

问题根源 #

1. .section采用Flex布局，但子元素.menu默认沿主轴左对齐；
2. 你尝试的margin-left:auto未生效，大概率是CSS优先级冲突，或规则未正确作用到目标元素；
3. HTML存在语法错误：#section1内有未配对的</video>标签，需删除。

修复方案 #

方案1：Flex自动边距（推荐） #

给.menu添加margin-left: auto，利用Flex布局的自动边距特性让菜单靠右：

.menu{
    position: relative;
    z-index:3;
    text-align: right;
    list-style-type: none;
    padding:10px;
    margin-left: auto; /* 核心：推动菜单在Flex容器内靠右 */
    margin-top: 0; /* 可选：清除默认margin，让菜单贴顶 */
}

如果元素检查器看不到该规则，可临时添加!important排查是否有样式覆盖：

margin-left: auto !important;

方案2：绝对定位 #

借助父容器的position:relative，将菜单绝对定位到右上角：

.menu{
    position: absolute; /* 修改为绝对定位 */
    z-index:3;
    text-align: right;
    list-style-type: none;
    padding:10px;
    top: 0;
    right: 0; /* 固定到右上角 */
}

此方案适合菜单无需参与Flex布局流的场景，不会干扰容器内其他元素排列。

修正HTML语法错误 #

删除#section1内多余的</video>标签，修正后片段：

<div class="section" id="section1">
    <ul class="menu">
        <li>Sculptures</li>
        <li>Quotes</li>
        <li>Reviews</li>
    </ul>
    <!-- 此处可添加你的图片或视频元素 -->
</div>

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