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无法点击链接

回答

相关问题