导航菜单部分Anchor链接无法点击问题求助（Symfony4环境）

问题场景 #

基于Symfony4开发的导航菜单，添加CSS后按钮1和4突然变得不可点击。试过移除链接外层的<li>标签能恢复正常，但这样会破坏原本的设计布局。

现有CSS代码 #

nav ul {
    list-style-type: none;
    padding: 0;
}
nav li {
    display: inline;
    float: left;
}
nav a:link , nav a:visited {
    display: block;
}
#user_tabs_professional {
    display: flex;
    margin: 0 5px;
    position: relative;
}
#link1{
    margin-left: 180%;
}
#link2{
    margin-left: 200%;
}#link3{
    margin-left: 260%;
}#link4{
    margin-left: 180%;
    margin-top: 40px;
}#link5{
    margin-left: 199%;
    margin-top: 40px;
}#link6{
    margin-left: 260%;
    margin-top: 40px;
}#link7{
    margin-left: 190%;
    margin-top: 40px;
}

导航栏HTML代码 #

<nav>
    <ul>
    <div>
        <li><a href="/profile/professional/account" id="link1"class="tablinks btn" onclick="openTab(event, 'favorites')">
            <img src="{{ asset('images/icons/profile_100.png') }}">
            <p class="bold">
            Fiche d'identité<br/><br/>Dirigeant, Etablissement
            </p>
        </a></li>

        <li><a href="/profile/professional/company" id="link2"class="tablinks btn" onclick="openTab(event, 'favorites')">
            <img src="{{ asset('images/icons/identity_100.png') }}">
            <p class="bold">
                Profil de mon établissement<br/><br/>Dirigeant, Etablissement
            </p>
        </a></li>

        <li><a id="link3"class="tablinks btn" onclick="openTab(event, 'favorites')">
            <img src="{{ asset('images/icons/formulas_100.png') }}">
            <p class="bold">
                Mes Offres<br/><br/>Dirigeant, Etablissement
            </p>
        </a></li>
    </div>
    <div>
        <li><a id="link4"class="tablinks btn" onclick="openTab(event, 'favorites')">
            <img src="{{ asset('images/icons/new_training_100.png') }}">
            <p class="bold">
                Mes Clients<br/><br/>Dirigeant, Etablissement
            </p>
        </a></li>

        <li><a href="{{ path('professional_settings', {id: app.user.id}) }}"id="link5"class="tablinks btn" onclick="openTab(event, 'favorites')">
            <img src="{{ asset('images/icons/my_trainings_100.png') }}">
            <p class="bold">
                Connection, Notifications&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/><br/>Dirigeant, Etablissement
            </p>
        </a></li>

        <li><a href="/profile/professional/support" id="link6"class="tablinks btn" onclick="openTab(event, 'favorites')">
            <img src="{{ asset('images/icons/contact_100.png') }}">
            <p class="bold">
                Contactez léquipe
                <br>
                SHINEBOX<br/>Dirigeant, Etablissement
            </p>
        </a></li>
    </div>
    <div>
        <li><a id="link7"class="tablinks btn" onclick="openTab(event, 'favorites')">
            <img src="{{ asset('images/icons/new_100.png') }}">
            <p class="bold">
                Découvrez les nouveaux produits SHINEBOX<br/><br/>Dirigeant, Etablissement
            </p>
        </a></li>
    </div>
    </ul>
    </nav>

问题原因及修复方案 #

核心问题 #

1. HTML结构不合法：<ul>的直接子元素只能是<li>，你直接在<ul>里嵌套了<div>，浏览器会自动修正这个错误，导致元素渲染层级混乱，部分链接的点击区域被覆盖或错位。
2. 定位方式冲突：给<li>设置float: left，同时给内部<a>设置display: block，再加上超大百分比的margin-left，让元素实际位置和视觉位置严重不符，点击事件无法触发。

修复步骤 #

1. 修正HTML结构

把<div>移到<li>内部，或者用<li>的class来实现分组，保持<ul>的合法结构：

<nav>
    <ul>
        <li class="nav-row">
            <a href="/profile/professional/account" id="link1" class="tablinks btn" onclick="openTab(event, 'favorites')">
                <img src="{{ asset('images/icons/profile_100.png') }}">
                <p class="bold">
                Fiche d'identité<br/><br/>Dirigeant, Etablissement
                </p>
            </a>
        </li>
        <!-- 其他导航项同理，移除外层div，用class控制布局 -->
    </ul>
</nav>

2. 重构CSS布局（替换超大margin）

放弃用超大margin定位，改用Flexbox实现更稳定的布局：

nav ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    gap: 30px; /* 元素之间的间距，替代margin */
}

nav li {
    display: block; /* 移除float，用flex控制排列 */
}

nav a:link, nav a:visited {
    display: block;
    padding: 10px; /* 确保点击区域足够 */
}

/* 如需强制换行，给对应li添加这个class */
.nav-break {
    flex-basis: 100%;
    height: 0;
}

3. 快速临时修复（不想重构时用）

如果暂时不想改结构和布局，给不可点击的链接添加层级优先级，强制让它们处于顶层：

#link1, #link4 {
    position: relative;
    z-index: 999;
    cursor: pointer;
}

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