製作塊級元素可點擊鏈接

Question

我有以下設計問題。我有一個項目列表，我想讓整個第一個李是一個可點擊的鏈接。我曾嘗試在每個li中添加一個鏈接，使其成爲塊級別的元素並將其定位爲絕對路徑，但這不起作用，因爲父級和所有li都是左側浮動以用於佈局目的。任何幫助，將不勝感激，謝謝

<ul style='float:left;width:x> 

    <li> 
     <ul> 
     <li>Title</li> 
     <li>Description</li> 
     </ul> 
    </li> 

    <li> 
     <ul> 
     <li>Title</li> 
     <li>Description</li> 
     </ul> 
    </li> 

    <li> 
     <ul> 
     <li>Title</li> 
     <li>Description</li> 
     </ul> 
    </li> 

</ul> 

Answer 1

如果父li有position: relative，您可以定位的東西絕對裏面沒有與父母四處漂浮的方式搞亂。

另一個有點不雅的解決方案是將onclick事件添加到每個父li s，並使用JavaScript更改URL。另外，將cursor: pointer添加到您的CSS中，使其看起來像一個鏈接。但正如我所說，這不是優雅。

Answer 2

你有沒有想過jQuery作爲一個選項？它可能不是最好的解決方案，但它會工作。所以我會鑽機的東西像這樣：

$("ul li:first-child").bind('click',function(){ 
    // click event here. 
    alert("Boom!"); 
    $(this).find("li a").trigger('click'); 
}); 

，我會擁有你的代碼看起來是這樣的：

<ul> 
    <li> 
     <ul> 
     <li><a href="#">title</a></li> 
     <li>description</li> 
     </ul> 
    </li> 
    <li> 
     <ul> 
     <li><a href="#">title</a></li> 
     <li>description</li> 
     </ul> 
    </li> 
    <li> 
     <ul> 
     <li><a href="#">title</a></li> 
     <li>description</li> 
     </ul> 
    </li> 
    <li> 
     <ul> 
     <li><a href="#">title</a></li> 
     <li>description</li> 
     </ul> 
    </li> 
</ul> 

Answer 3

放入裏的鏈接，並使用display:block。不要絕對放置它們。