CSS设置text-align:right无法实现导航菜单右对齐的问题求解

• text-align 属性的生效前提是作用在块级父元素上，用来控制该元素内部行内、行内块类型子元素的对齐方式。你把这个属性写在了设置为display: inline的<a>标签上：行内元素的宽度完全由自身内容撑开，没有多余的布局空间，对齐规则根本不会生效。
• 对齐逻辑写反了层级：你需要对齐的是整组导航项，不是单个<a>标签里的文字，对齐属性应该加在导航项的父容器（即<nav>标签）上，而非单个<a>子元素。
• 额外HTML语法问题：你的代码中.menu_items容器的闭合标签写错了，写成了开标签<div>，正确闭合标签应为</div>，标签未闭合可能导致布局错乱。

首先修正HTML的标签闭合错误，再把右对齐规则迁移到<nav>父元素上即可。
修正后的完整代码：

HTML部分 #

<body>
    <div class="menu_items">
        <h1>My Heading</h1>
        <nav>
            <a>Item 1</a>
            <a>Item 2</a>
            <a>Item 3</a>
            <a>Item 4</a>
        </nav>
    </div>
</body>

CSS部分 #

/* 给导航父容器加右对齐规则 */
.menu_items nav {
    text-align: right;
}
.menu_items nav a {
    display: inline;
    margin-right: 10px;
}

如果需要做更灵活的响应式导航布局，也可以用Flex布局实现，元素间距控制更均匀：

.menu_items nav {
    display: flex;
    justify-content: flex-end;
    gap: 10px; /* 直接控制导航项间距，无需给单个a标签加margin */
}

内容的提问来源于stack exchange，提问作者Chicken Sandwich No Pickles