使 logo div 成为可点击的链接答案

【问题标题】：Making logo div a clickable link使 logo div 成为可点击的链接
【发布时间】：2015-12-01 23:23:26
【问题描述】：

我有一个徽标和第二个元素，它们包含在我想要创建链接的导航中的 div 中。尝试了似乎一切。看起来 .logo svg div 正在链接，但正在运行 #topnav 的整个宽度，并且带有 .logo 的区域不可点击。关于 div 的 .nav 容器根本没有链接，我似乎无法让它在导航中右对齐。

这里可能存在一些问题（为此道歉），但任何建议都将不胜感激。

HTML

<div id="topbar">
        <a href="##">
            <div class="logo svg">
                <object class="logo" type="image/svg+xml" data="img/gf_logo_main.svg">
                </object>
            </div>
        </a>
        <a href="###">
            <div class="nav container about">
                <object class="nav about" type="image/svg+xml" data="img/question mark.svg">
                </object>
            </div>
        </a>
    </div>

CSS

    #topbar {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 65px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.8);
    color: #000;
}

.logo svg {
    float: left;
    width: 50px;
}

.logo {
    height: 80%;
}

.logo img {
    border: 0;
    display: none;
    height: 100%;
    width: 100%;
}

.nav container about {
    position: absolute
    right: 0px;
}

.nav link about{
    height: 80%;
    }

页面在这里：

http://www.glitteringfacade.com

【问题讨论】：

标签： html css

【解决方案1】：

您不再需要为 SVG 使用 <object> 标签。 Since IE9，你可以像普通的 <img> 一样内联它（但一定要指定它的宽度和高度，无论是作为属性还是在 CSS 中）。

<a href="#" class="logo svg"><img src="img/gf_logo_main.svg"></a>

【讨论】：

感谢 Blazemonger。不确定我是否正确实施，但现在徽标根本没有出现。 HTML `

` CSS .logo svg {向左飘浮;宽度：100%；高度：100%； }
您还需要相应地重新组织您的 CSS。 .logo svg 不再存在，由于某种原因，您在容器 div 和 svg 元素上都有 class="logo"。
对不起。我不跟着你。我现在只使用.logo svg。
我认为您的意思是在样式表中使用.logo.svg 或.logo .svg？
知道了。是的。谢谢 Blazemonger。

【解决方案2】：

您可以在 div 标签中使用onclick="window.location = 'http://www.yoururl.com';" 将其设为“链接”，并为其赋予cursor: pointer; CSS 样式。

【讨论】：

这个“有效”，但如果有更好的选择（如 Blazemonger 的回答），它不应该被使用。
谢谢大家。尝试了第一个选项无济于事。