html - 无法点击 Logo ，CSS 问题

Question

HTML

 <div class="app-header-logo">
        <a href="/home"><img ng-src="img/..."/></a>
    </div>

CSS

.app-header-logo {
    width: 48px;
    height: 64px;
    padding: 8px 0px 8px 0px;
    margin: 0px 16px 0px 0px;
    vertical-align: middle;
    text-align: center;
    background-color: #009530;
    display: inline-block;
}

    .app-header-logo > img {
        height: 32px;
        margin: 8px 0px 8px 0px;
    }

上面是我的代码，我希望当用户点击图片时他必须被重定向到某个链接，但是当我检查元素时我看到 anchor 标签在那里但我无法点击，我也不知道很多 CSS，但我希望这是 CSS 问题。

因为当我删除上面的类 "app-header-logo" 时，我可以点击和图标 - cursor:pointer 正在显示。

感谢任何帮助!!!

谢谢

Answer 1

现在试试这个 css

.app-header-logo a {display:inline-block;vertical-align:top;}

并删除到 >

.app-header-logo  img {
        height: 32px;
        margin: 8px 0px 8px 0px;
    }

或对此定义

.app-header-logo a {display:block;}

a 是内联元素，定义它是 block lever 或 inline-block level 元素。