如何使無序列表的整個區域可點擊？

我想使我的無序列表的整個區域可點擊一個URL。到目前爲止沒有運氣。如何使無序列表的整個區域可點擊？

的CSS標記至今如下：

#artListContainer { 
margin: 0 0 0 0; 
} 

#artListContainer ul { 
list-style-type: none; 
width: 590px; 
margin: 20px 0 0 0; 
} 

#artListContainer h3 { 
font: bold 18px/1.5 Helvetica, Verdana, sans-serif; 
color:#333333; 
} 

#artListContainer li img { 
float: left; 
margin: 0 15px 0 0; 
} 

#artListContainer li p { 
font: 200 12px/1.5 Helvetica, Verdana, sans-serif; 
} 

#artListContainer li { 
padding: 10px; 
overflow: auto; 
} 

#artListContainer li:hover { 
background: #eee; 
cursor: pointer; 
}

我的HTML標記目前看起來是這樣的：

<div id="artListContainer"> 
<ul> 
    <li> 
    <img src="themes/default/templates/articles/articlethumbs/8.png"> 
    <h3>Title goes here</h3> 
    <p>description goes here.</p> 
    <span style="font-weight:bold">Views:&nbsp;</span>(327) 
    &nbsp;&nbsp;&nbsp; 
    <span style="font-weight:bold">Comments:&nbsp;</span>(4) 
    &nbsp;&nbsp;&nbsp; 
    <span style="font-weight:bold">Likes:&nbsp;</span>(4) 
    </li> 
</ul> 
</div>

提前許多感謝任何幫助或建議。

來源

2013-10-24 Ruf1

你點擊的意思是什麼？我的代碼中沒有看到鏈接（''），那麼點擊會做什麼？ –

@Sébastien對於單個URL，它被寫入。 – EdenSource

這是一件事。

<a href="#"> 
<ul> 
    <li>Stuff</li> 
    <li>Stuff</li> 
    <li>Stuff</li> 
    <li>Stuff</li> 
</ul> 
</a>

來源

2013-10-24 16:05:19 usernolongerregistered

謝謝。這可以跨所有瀏覽器使用嗎？ – Ruf1

@ Ruf1我剛剛在FF，Chrome和IE中試過。到現在爲止還挺好。 – usernolongerregistered

如上所述，您可以在任何地方包裹錨標籤。這只是HTML5中的有效代碼，所以如果您使用的是HTML4，它將無法驗證。

雖然這樣做的可訪問性很差。理想情況下，你應該有一個單一的鏈接，並用jquery將它的href綁定到容器元素。

來源

2013-10-24 16:08:06 arroni

如何使無序列表的整個區域可點擊？

回答

相關問題