Question

我有一个徽标和第二个元素，这些元素包含在我想要建立链接的导航中的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%;
    }

Page在这里：

http://www.glitteringfacade.com

Answer 1

您不再需要为SVG使用<object>标签了。 Since IE9，您可以将其内联为普通<img>（但请务必指定其宽度和高度，无论是作为属性还是在CSS中）。

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

Answer 2

您可以将其设为＆＃34;链接＆＃34;在div标签中使用onclick="window.location = 'http://www.yoururl.com';"并为其提供cursor: pointer; CSS样式。

使徽标div成为可点击的链接

2 个答案: