HTML 锚点不可点击答案

【问题标题】：HTML anchor not clickableHTML 锚点不可点击
【发布时间】：2022-08-18 01:27:32
【问题描述】：

我正在尝试设计一个导航菜单，但是当我添加 css 时，一些链接（按钮）变得不可点击（按钮 1 和 4）。我正在 Symfony 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;
}

我的导航栏

    <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>

验证您的 html，您不能将 div 作为 ul 的直接子级。检查 flexbox 的布局，不要使用这个奇怪的百分比。

标签： html css symfony4

【解决方案1】：

在这一点上回答我的问题是没有意义的，因为我放弃了那个 css 并设法使一切正常。

【讨论】：

问题（和答案）不适合您个人。它们应该适用于遇到相同或相似问题的每个人。请记住这一点，以备将来的问题（和答案）。