使徽標div成爲可點擊的鏈接

我有一個徽標和第二個元素包含在我想要創建鏈接的導航欄中的div中。試過看起來像什麼都好。它看起來像.logo svg div正在鏈接，但正在運行#topnav的全部寬度，並且帶有.logo的區域不可點擊。關於div的.nav容器根本沒有鏈接，我似乎無法將它在右側對齊。使徽標div成爲可點擊的鏈接

這裏可能有幾個問題（道歉），但任何建議都將不勝感激。

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

來源

2015-12-01 M Hamilton

你可以把它「鏈接」在你的div標籤使用onclick="window.location = 'http://www.yoururl.com';"，並給予它cursor: pointer; CSS樣式。

來源

2015-12-01 15:16:43

，如果有更好的選擇（如Blazemonger的答案），不應該使用這個「作品」，但它是一個黑客 – Brian

謝謝你們。嘗試了第一個選擇無濟於事。 –

您無需爲SVG使用<object>標籤。 Since IE9，你可以將它內嵌爲一個正常的<img>（但是一定要指定它的寬度和高度，無論是作爲屬性還是CSS）。

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

來源

2015-12-01 15:23:26 Blazemonger

感謝Blazemonger。不知道我是否正確實施，但現在標誌完全不出現。 HTML ''

CSS .logo SVG { 浮動：左; 寬度：100％; 身高：100％; } –

您還需要相應地重新組織您的CSS。 '.logo svg'不再存在，出於某種原因，你在容器div和svg元素上都有'class =「logo」'。 – Blazemonger

對不起。我沒跟着你。我現在只使用'.logo svg'。 –

使徽標div成爲可點擊的鏈接

回答

相關問題