Как я могу сделать всю область списка unorderd доступной?

Question

Я хотел бы сделать всю область моего неуказанного списка доступным для одного 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> 

Большое спасибо заранее за любую помощь или предложения.

Answer 1

Это вещь.

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

Answer 2

Как и выше, вы можете обернуть якорный тэг вокруг всего. Это только действительный код из HTML5, поэтому, если вы используете HTML4, он не будет проверяться.

Это плохо для доступности, делая это таким образом. В идеале вы должны иметь единственную ссылку и привязать ее href к элементу контейнера с помощью JQuery.