, что делает элементы уровня блока интерактивными ссылками

Question

У меня есть следующая проблема с дизайном. У меня есть список элементов, и я хочу, чтобы вся первая из первых 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 и использовать 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. Не устанавливайте их абсолютно.