只有一半的<a>標記被鏈接

我想創建兩個帶可點擊標題的列框。我有一切設置和工作，但是當我測試時，我意識到只有一半的頭是可點擊的。在左欄中，左半部分是可點擊的。在右欄中，右半部分是可點擊的。 'a'標籤適用於整個標題。只有一半的<a>標記被鏈接

<section class="container"> 
     <div class="row"> 
      <div class="col-sm-6"> 
       <div class="item-block"> 
        <a href="#"><h3 class="block-header">#</h3></a> 
        <p>#</p> 
       </div> 
       <div class="item-block"> 
        <a href="#"><h3 class="block-header">#</h3></a> 
        <p>#</p> 
       </div> 
      </div> 
      <div class="col-sm-6"> 
       <div class="item-block"> 
        <a href="#"><h3 class="block-header">#</h3></a> 
        <p>#</p> 
       </div> 
       <div class="item-block"> 
        <a href="#"><h3 class="block-header">#</h3></a> 
        <p>#</p> 
       </div>  
      </div> 
     </div> 
    </section>

我添加了佈局圖片。在每個項目塊的頂部是一個塊頭，它是藍色的條。紅色部分是鏈接的部分。藍色部分什麼都不做。

CSS：

.item-block { 
    border: 2px solid #0026FF; 
    margin-left:20px; 
    margin-right:20px; 
    margin-bottom:20px; 
    border-radius: 6px; 
    font-size:1.2em; 
} 

.block-header { 
    text-align:center; 
    background:#0026FF; 
    padding:10px; 
    color:white; 
    margin-top:0px; 
    margin-bottom:10px; 
    border-radius: 3px 3px 0px 0px; 
} 

.item-block .block-header a { 
    color:white; 
    display:block; 
}

任何人都知道如何解決這個問題所以整個頭是可點擊？

來源

2016-05-10 LazerWing

您是否嘗試過設置您的以顯示：block？ –

我試過了，它沒有工作。 – LazerWing

其他東西一定是造成這個，然後，我創建了一個codepen基於你的例子，它工作正常：http://codepen.io/stufu/pen/JXxqLv –

我發現問題是我的網頁的另一部分。在頁面的下方是一個居中的列，它與頁面中心的任何東西重疊，使得這兩個部分無法正常工作。我將雙列的z-index更改爲居中列之上，現在它可以正常工作。

來源

2016-05-11 02:19:00 LazerWing

只有一半的<a>標記被鏈接

回答

相關問題