使用<a>标签将卡片转为链接后页面卡片下移的问题求助

问题原因 #

1. HTML结构错误：你的代码存在标签闭合错误，第一个<a>标签未闭合，反而提前闭合了外层的.shell容器，导致第二个卡片<a>不在flex布局容器内，直接破坏了整体排版，这是卡片下移的核心原因。
2. a标签默认样式影响：<a>标签默认是行内元素，即使设置了display:flex，部分浏览器残留的默认对齐规则（如vertical-align:baseline）也可能导致微小偏移。
3. CSS语法错误：.main-description的font-size: px;是无效声明，会导致文字样式异常。

解决步骤 #

• 修复HTML标签闭合问题，确保所有<a>标签正确闭合且都包裹在.shell容器内。
• 给.card类添加vertical-align:top，消除行内元素默认对齐带来的偏移。
• 修正.main-description的字体大小声明，设置合理数值。

修正后的完整代码 #

<!DOCTYPE html>
<head>
    <meta charset="utf-8"/>
    <title>Project-LuLo</title>
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <style>
        body {
            font-family: 'Open Sans', sans-serif;
        }

        .shell{
            justify-content:center;
            display: flex;
            flex-direction:row;
            flex-basis: auto;
            margin:5px;
        }

        .card {
            width: 175px;                
            display: flex;              
            flex-direction: column;       
            border: 1px solid #EF9A9A;    
            border-radius: 4px;
            overflow: hidden;
            margin: 10px;  
            text-decoration:none;
            vertical-align: top; /* 消除行内元素默认对齐偏移 */
        }

        .card-header {
            color: #D32F2F;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            border-bottom: 1px solid #EF9A9A;
            background-color: #FFEBEE;
            padding: 5px 10px;
        }

        .card-main {
            display: flex;              
            flex-direction: column;     
            justify-content: center;    
            align-items: center;        
            padding: 15px 0;            
        }

        .material-icons {
            font-size: 72px;
            margin-bottom: 5px;
            color: #D32F2F;
        }

        .main-description {
            color: #D32F2F;
            font-size: 14px; /* 修复无效的字体大小声明 */
            text-align: center;
        }

        * {box-sizing: border-box;}

        body { 
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }

        .header {
            overflow: hidden;
            background-color: #FFEBEE;
            padding: 20px 10px;
            border-bottom: 1px solid #EF9A9A;
            border-radius: 4px;
        }

        .header a {
            float: left;
            color: #D32F2F;
            text-align: center;
            padding: 12px;
            text-decoration: none;
            font-size: 18px; 
            line-height: 25px;
            border-radius: 4px;
        }

        .header a.logo {
            font-size: 25px;
            font-weight: bold;
        }

        .header a:hover {
            background-color: #dfd5d7;
            color: #942626;
        }

        .header a.active {
            background-color: #D32F2F;
            color: #FFEBEE;
        }

        .header-right {
            float: right;
        }

        @media screen and (max-width: 500px) {
            .header a {
                float: none;
                display: block;
                text-align: left;
            }
            
            .header-right {
                float: none;
            }
        }
    </style>
</head>
<body>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">

    <div class="header">
        <a href="#home" class="logo">Project-LuLo</a>
        <div class="header-right">
            <a class="active" href="#home">Home</a>
            <a href="#games">Games</a>
            <a href="#contact">Contact</a>
        </div>
    </div>

    <div class="shell"> 
        <a href="#test" class="card">
            <div class="card-header">Games</div>
            <div class="card-main">
                <i class="material-icons">videogame_asset</i>
                <div class="main-description">Web Based Games</div>
            </div>
        </a> <!-- 正确闭合a标签 -->

        <a href="#test" class="card">
            <div class="card-header">Other</div>
            <div class="card-main">
                <i class="material-icons">question_mark</i>
                <div class="main-description">Cool Random Stuff</div>
            </div>
        </a> <!-- 正确闭合a标签 -->
    </div> <!-- 最后闭合shell容器 -->
</body>
</html>

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