CSS HTML無法點擊鏈接

我在這裏有這個網頁：http://artendijen.com/product/animals-stream/有鏈接在右側，但是我不能點擊它們...有沒有人知道爲什麼？CSS HTML無法點擊鏈接

左側：

<nav class="woocommerce-breadcrumb" itemprop="breadcrumb"><a class="home" href="http://artendijen.com">Home</a>/<a class="home" href="/shop">Gallery &amp; Shopping</a>/<a href="http://artendijen.com/product-category/small/#108">Small</a>/Animals by the Stream</nav>

右側：

<ul style="float:right;" class="shoppingBread"><li><a href="/product-category/prints-notecards">Prints &amp; Notecards</a></li><li><a href="/product-category/background-information">Background Information</a></li><li><a href="/cart">Cart</a></li></ul>`

CSS的左側：

.woocommerce .woocommerce-breadcrumb, .woocommerce-page .woocommerce-breadcrumb { 
    float: left; 
    z-index: 99999; 
    position: relative; 
    margin: 0 0 1em; 
    padding: 0; 
    font-size: .92em; 
    color: #777; 
}

CSS的右側僅僅是浮動的權利，但這裏是CSS對於右側的列表項：

.shoppingBread li { 
    padding-bottom: 5px; 
    text-align: right; 
}

來源

2013-11-27 user1269625

名單：

<ul style="float:right;" class="shoppingBread"><li><a href="/product-category/prints-notecards">Prints &amp; Notecards</a></li><li><a href="/product-category/background-information">Background Information</a></li></ul>

被覆蓋後，它自帶一個div。下面的CSS添加到列表中，這將是可點擊：

position: relative; 
z-index: 1;

或者，你可以清除列表後到來的DIV：

<div itemscope="" itemtype="http://schema.org/Product" id="product-108" class="post-108 product type-product status-publish hentry instock">

加入clear: both;

來源

2013-11-27 19:49:05 j08691

或者刪除'浮動：right'，將工作，因爲它們是與'text-align：right'對齊。 –

@JoshC - 正在更新我的答案，以給出第二個解決方案，清除浮動列表，這與您剛剛建議的幾乎相同;） – j08691

刪除從你的CSS如下：

.woocommerce div.product, .woocommerce-page div.product, .woocommerce #content div.product, .woocommerce-page #content div.product { 

    position: relative; ///Remove this 
}

來源

2013-11-27 19:50:20 Ani

.woocommerce div.product, .woocommerce-page div.product, .woocommerce #content div.product, .woocommerce-page #content div.product { 
margin-bottom: 0; 
position: relative; 
}

刪除position: relative;它會工作。它似乎沒有影響佈局。

來源

2013-11-27 19:50:46

你<header>元素被重疊的鏈接，這樣的鏈接不能懸停或點擊時：

enter image description here

看看重組您的標記或使用[z-index][2]獲取包含的鏈接元素在<header>以上。

您還可以刪除位置：從本線在你的CSS相對的，雖然可能有其他意外衝擊效應：

.woocommerce div.product, .woocommerce-page div.product, .woocommerce #content div.product, .woocommerce-page #content div.product

來源

2013-11-27 19:50:56 johnkavanagh

CSS HTML無法點擊鏈接

回答

相關問題