Как сделать, чтобы cursor: pointer отрабатывал только на тексте?

Question

[anyachecka]

а не на всей li
плюс если будет ссылка добавлена внутрь li - то переход был только после клика на текст

Answer 1

[Икотий Айтишевич]

Сделать padding: 0;, для <li></li> тегов. Либо обернуть текст в тег <a href=""></a> и уже тегу <a href=""></a> задать cursor: pointer;

Comments

[anyachecka]

iko.it, это не помогает

[Икотий Айтишевич]

Прошу прощения, ещё добавить тегам width: max-content;

[anyachecka]

iko.it, вот с width: max-content;
но пункты слева https://jsfiddle.net/w18f62an/

[Икотий Айтишевич]

anyachecka, А чтобы пункты были справо, то Вам нужно тегу <ul> задать:

ul {
  margin-left: auto;
  width: max-content;
}

Но лучше отцентровать его через flex

[anyachecka]

iko.it, спасибо. с маргином работает
а флекс не хочет - https://jsfiddle.net/w18f62an/1/

Answer 2

[Kirill Makarov]

Оберни в span

Answer 3

[Владислав Черненко]

Оберните текст в span, например:
<li><span>текст</span></li>

li span{cursor:pointer;}

Про клик не понял... со 2-го клика всмысле? Тогда так:

$('li a').click(function(e){
    if(!$(this).parent().hasClass('active')) {
        $('li').removeClass('active');
        $(this).parent().addClass('active');
        e.preventDefault();
    } else {
        return true;
    }
});