展開一個HTML鏈接的點擊區域爲包含其他內容

Question

包裝li元素的大小，我基本上是這樣的html代碼：

<ul class="unordered-list"> 
    <li class="list-item"> 
    <div class="list-item-block"> 
     <a href="www.google.com" class="list-item-link">Sometimes a wrapped link to Google</a> 
     <p class="list-item-link-description">Short description of the link above</p> 
    </div> 
    </li> 
</ul> 

有沒有辦法擴大鏈接的點擊區域通過保持鏈接位置和描述恰好在鏈接之下來保存li元素的大小？

我試圖對鏈接和描述都使用絕對定位，但如果例如鏈接文本有換行符，則失敗。正如你可以看到在這個jsFiddle：http://jsfiddle.net/xgcjngvs/3/

我很想找到一個解決方案，這個問題沒有javascript。

編輯：我應該提到，鏈接標記應該只包含純文本，而不是任何其他的HTML代碼。

Answer 1

鑑於你的新要求還有另一種方法，這可以在不改變現有的HTML結構來實現：

• 從.list-item-link和.list-item-link-description取出absolute定位，position: absolute;採用這些元件，文檔流的這兩個需要注意的多少空間每個人佔用
• 僞元素添加到.list-item-link使用.list-item-link:after，使此position: absolute;並設置height和width佔用容器的尺寸。

.unordered-list { 
 
    list-style: none; 
 
    padding-left: 0; 
 
} 
 
.list-item { 
 
    min-height: 50px; 
 
    position: relative; 
 
} 
 
.list-item-link { 
 
    width: 100%; 
 
} 
 
.list-item-link:after { 
 
    content: ""; 
 
    height: 100%; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 
.list-item-link-description { 
 
    margin: 0; 
 
}

<ul class="unordered-list"> 
 
    <li class="list-item"> 
 
     <div class="list-item-block"> 
 
      <a href="www.google.com" class="list-item-link">Sometimes a wrapped link to Google</a> 
 
      <p class="list-item-link-description">Short description of the link above</p> 
 
     </div> 
 
    </li> 
 
    <li class="list-item"> 
 
     <div class="list-item-block"> 
 
      <a href="www.google.com" class="list-item-link">Sometimes a wrapped link to Google. It is very very very very very very long to demonstrate the linke break.</a> 
 
      <p class="list-item-link-description">Short description of the link above</p> 
 
     </div> 
 
    </li> 
 
</ul>

JS小提琴：http://jsfiddle.net/5s44c95q/

Answer 2

如果您的簡短說明將在1行上，您可以將padding-bottom添加到list-item-link，然後將說明向上移動相同的數量，並且爲整個塊設置否定的margin-bottom。如果你在ems中進行填充，它應該處理不同的字體大小。

要使簡短描述可點擊，您需要使鏈接的z-index高於描述。

.unordered-list { 
 
    padding-left: 0; 
 
    list-style: none; 
 
} 
 

 
.list-item { 
 
    margin-top:10px; 
 
    margin-bottom:-2em; 
 
    position:relative; 
 
} 
 

 
.list-item-link { 
 
    display:block; 
 
    position:relative; 
 
    border:1px #000 solid; /*to show link area */ 
 
    padding-bottom:2em; 
 
    z-index:1; 
 
} 
 

 
.list-item-link-description { 
 
    position:relative; 
 
    top:-2em; 
 
}

<ul class="unordered-list"> 
 
    <li class="list-item"> 
 
    <div class="list-item-block"> 
 
     <a href="www.google.com" class="list-item-link">Sometimes a wrapped link to Google</a> 
 
     <p class="list-item-link-description">Short description of the link above</p> 
 
    </div> 
 
    </li> 
 
    <li class="list-item"> 
 
    <div class="list-item-block"> 
 
     <a href="www.google.com" class="list-item-link">Sometimes a wrapped link to Google. It is very very very very very very long to demonstrate the linke break.</a> 
 
     <p class="list-item-link-description">Short description of the link above 2</p> 
 
    </div> 
 
    </li> 
 
</ul>

Answer 3

這是可能有一些變化，以您的標記和CSS：

• 變化list-item-block到a元素，並將其設置爲display: block;
• 變化list-item-link和list-item-link-description換成span元素爲只有inline個元素a元素爲有效
• 風格list-item-link看起來像鏈接
• 風格list-item-link-description看起來像一款

.unordered-list { 
 
    padding-left: 0; 
 
    list-style: none; 
 
} 
 

 
.list-item { 
 
    position: relative; 
 
    height: 50px; 
 
} 
 

 
.list-item-block { 
 
    display: block; 
 
    min-height: 100%; 
 
    text-decoration: none; 
 
} 
 
.list-item-link {  
 
    text-decoration: underline; 
 
} 
 

 
.list-item-link-description { 
 
    color: #000000; 
 
    display: block; 
 
    text-decoration: none; 
 
}

<ul class="unordered-list"> 
 
    <li class="list-item"> 
 
     <a href="www.google.com" class="list-item-block"> 
 
      <span class="list-item-link">Sometimes a wrapped link to Google</span> 
 
      <span class="list-item-link-description">Short description of the link above</span> 
 
     </a> 
 
    </li> 
 
    <li class="list-item"> 
 
     <a href="www.google.com" class="list-item-block"> 
 
      <span class="list-item-link">Sometimes a wrapped link to Google. It is very very very very very very long to demonstrate the linke break.</span> 
 
      <span class="list-item-link-description">Short description of the link above</span> 
 
     </a> 
 
    </li> 
 
</ul>

Answer 4

編輯：我刪除的段落標記爲你已經提出要求，但是如果沒有跨度，我無法以任何其他方式工作，所以跨度將不得不保持原位。

<ul class="unordered-list"> 
    <li class="list-item"> 
     <div class="list-item-block"> 
      <span class='anchor-control'><a href="www.google.com" class="list-item-link">Sometimes a wrapped link to Google</span> 
      Short description of the link above 
      </a> 
     </div> 
    </li> 
    <li class="list-item"> 
     <div class="list-item-block"> 
      <span class='anchor-control'><a href="www.google.com" class="list-item-link">Sometimes a wrapped link to Google. It is very very very very very very long to demonstrate the linke break This needs to be a longer link then .</span> 
      Short description of the link above 
      </a> 
     </div> 
    </li> 
</ul> 

這裏是你的CSS。 編輯：新的風格相匹配的頂部，這是很簡單的東西

a{ 
    text-decoration: none; 
    color: #000; 
} 
.anchor-control a{ 
    text-decoration: underline; 
    width: 100%; 
    float: left; 
    color: #00f; 
} 

.unordered-list { 
    padding-left: 0; 
    list-style: none; 
} 

.list-item { 
    position: relative; 
    padding; 0; 
    margin: 0; 
} 

.list-item-link { 
    position: relative; 
} 

a .list-item-link-description { 
    position: relative; 
    color: #000; 
    margin: 0; 
    margin-bottom: 10px; 
} 

編輯：這應該是你追求的。

http://jsfiddle.net/xgcjngvs/9/

Answer 5

css 
 

 
a{ 
 
\t text-decoration: none; 
 
} 
 
.anchor-control{ 
 
\t text-decoration: underline; 
 
} 
 
.unordered-list { 
 
\t padding-left: 0; 
 
\t list-style: none; 
 
} 
 

 
.list-item { 
 
\t position: relative; 
 
\t padding; 0; 
 
\t margin: 0; 
 
} 
 

 
.list-item-link { 
 
\t position: relative; 
 
} 
 

 
#content { 
 
\t display: none; 
 
} 
 
#show:target #content { 
 
\t display: inline-block; 
 
} 
 
#show:target #open { 
 
\t display: none; 
 
} 
 
.btn-open:after,.btn-close:after{ 
 
\t position:absolute; 
 
\t right:280px; 
 
\t top:0; 
 
} 
 
.btn-open:after{ 
 
\t content: "\25BC";  
 
} 
 
.btn-close:after{ 
 
\t content: "\25B2";  
 
}

<ul class="unordered-list"> 
 
\t <li class="list-item"> 
 
\t <span class='anchor-control'><a href="www.google.com" class="list-item-link">Sometimes a wrapped link to Google</a></span> \t 
 
\t <div id="show"> 
 
\t \t <a href="#show" id="open" class="btn-open"></a> 
 
\t \t <div id="content"> 
 
\t \t \t Short description of the link above 
 
\t \t <a href="#hide" id="close" class="btn-close"></a> 
 
\t \t </div> 
 
\t </div> 
 
\t </li> 
 
</ul>

試試這個JSFIDDLE