为何使用margin-auto无法将<ul>移至容器右侧？非flexbox实现方案

原因分析 #

margin-left: auto生效的核心前提是元素存在可用的水平剩余空间。你的<ul>是默认的块级元素（display: block），这类元素的宽度默认值为auto，会自动填满父容器<nav>的全部水平宽度——相当于占满了所有可用空间，自然没有多余空间留给margin-left: auto去拉伸，所以这个属性完全起不到右对齐的作用。

非Flexbox的解决方法 #

方法1：行内块+父元素文本右对齐 #

将<ul>改为行内块元素（宽度由内容决定），再给父容器<nav>设置文本右对齐：

nav {
    width: 50%;
    background-color: #FFCD07;
    padding-top: 1.5rem;
    text-align: right; /* 新增：让子元素右对齐 */
}

ul{
    display: inline-block; /* 新增：改为行内块，宽度适配内容 */
    margin: 0; /* 清除ul默认的外边距，可选优化 */
}

方法2：浮动定位 #

给<ul>设置右浮动，这是传统布局中最常用的右对齐方案：

nav {
    width: 50%;
    background-color: #FFCD07;
    padding-top: 1.5rem;
    overflow: hidden; /* 新增：闭合浮动，防止父容器高度塌陷 */
}

ul{
    float: right; /* 新增：右浮动 */
    margin: 0; /* 清除ul默认的外边距，可选优化 */
}

注意：如果<nav>内还有其他元素，需要调整元素顺序避免布局错乱；overflow: hidden用来解决浮动导致的父容器高度塌陷问题。

方法3：相对定位+位移 #

通过相对定位将<ul>拉到右侧，再用transform修正位置，不会影响其他元素布局：

nav {
    width: 50%;
    background-color: #FFCD07;
    padding-top: 1.5rem;
}

ul{
    position: relative;
    left: 100%; /* 先把ul的左边缘对齐nav的右边缘 */
    transform: translateX(-100%); /* 再把ul整体向左拉回自身宽度 */
    margin: 0; /* 清除ul默认的外边距，可选优化 */
}

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