text-align:right属性不生效？新手CSS布局问题咨询

你给<a>标签设置text-align: right没效果的核心原因是：text-align属性是控制块级元素内部文本/行内元素的对齐方式，而非让元素自身向右对齐。你的<a>标签是inline-block类型，它的位置由父容器（包裹标题和链接的<div>）决定，给它自身设置text-align:right只会让标签内部的文字在自己的小盒子里右对齐，视觉上完全看不出变化。

下面给你两种可行的解决方案：

方案1：给父容器设置text-align:right（简单快速） #

给包裹标题和链接的父div添加类名，设置text-align:right，同时让标题覆盖这个对齐规则保持左对齐：

修改后的HTML #

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título del sitio web</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="header-wrap">
        <h1 class="encabezado">Sitio web de App</h1>
        <a href="index.html" class="links">Inicio</a>
        <a href="https://c.tenor.com/_4YgA77ExHEAAAAd/rick-roll.gif" class="links">App</a>
        <a href="#" class="links">Sobre nosotros</a>
    </div>
    <div class="foot">Todos los derechos reservados</div>
</body>
</html>

修改后的CSS #

*{
    margin: 0;
    padding: 0;
}
.header-wrap {
    text-align: right; /* 控制内部行内元素右对齐 */
}
.encabezado {
    background: #007fff;
    color: white;
    padding: 30px;
    text-align: left; /* 覆盖父容器的对齐规则，保持标题左对齐 */
}
.links{
    padding-right: 20px;
    color: black;
    text-decoration: none;
    display: inline-block; 
}
.foot{
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #404040;
    color: white;
    padding: 10px 0; /* 增加内边距，避免文本贴边 */
}

方案2：用Flex布局（适合现代复杂布局） #

如果想让标题和链接在同一行分别左右对齐，Flex布局是更灵活的选择：

修改后的HTML #

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título del sitio web</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="header-flex">
        <h1 class="encabezado">Sitio web de App</h1>
        <div class="links-group">
            <a href="index.html" class="links">Inicio</a>
            <a href="https://c.tenor.com/_4YgA77ExHEAAAAd/rick-roll.gif" class="links">App</a>
            <a href="#" class="links">Sobre nosotros</a>
        </div>
    </div>
    <div class="foot">Todos los derechos reservados</div>
</body>
</html>

修改后的CSS #

*{
    margin: 0;
    padding: 0;
}
.header-flex {
    display: flex;
    justify-content: space-between; /* 两端对齐，标题左，链接组右 */
    align-items: center; /* 垂直居中对齐 */
    background: #007fff; /* 把背景移到父容器，让整个头部区域统一蓝色 */
}
.encabezado {
    color: white;
    padding: 30px;
}
.links-group {
    margin-right: 20px;
}
.links{
    padding-right: 20px;
    color: white; /* 适配蓝色背景，改成白色文字 */
    text-decoration: none;
    display: inline-block; 
}
.foot{
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #404040;
    color: white;
    padding: 10px 0;
}

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