Как лучше сделать ссылку в списке ul li?

Question

[50VAJJ]

Привет. Есть список из ul li. Проблема в том, что перейти по ссылке возможно лишь в том случае, если кликать по тексту. Выглядит так - >

<ul>
        <li><a href="">Что-то</a></li>
 </ul>

Есть ли способ сделать так, чтобы ссылка начиналась с li, и не ставить список в ссылку ->

<ul>
        <a href=""><li>Что-то</li></a>
 </ul>

Ведь способ выше это говнокод?

Answer 1

[Андрей Федоров]

Первый, способ приведенный вами в вопросе, единственно верный.
Чтобы ссылка "начиналась" с <li>, не нужно <li> в CSS давать padding. Давайте его для <a>. А для того, чтобы вертикальные отступы то же сработали дайте для <a>display: block или display: inline-block.

Comments

[50VAJJ]

Спасибо. Ещё вопрос. У меня

.tags ul li{
    float: left;
    padding: 20px;
}

Но справа, когда переход на новую строку, отступ намного больше. margin не помогает.
Как без margin-а это выровнять?

[Андрей Федоров]

правильно, потому ul-li - это нумерованый список. как правило элементы li имеют дополнительный отступ.
для принципиального решения вопроса разберитесь с css для списков, а так же с двумя важными вещами - reset.css и normalize.css.

[50VAJJ]

Андрей Федоров: "элементы li имеют дополнительный отступ."
А если так:

ol, ul, li {
    margin: 0;
    padding: 0;

    list-style: none;
}

?

[50VAJJ]

Андрей Федоров: Разобрался, а цвет, ведь, нельзя в списке поменять? То-есть первый красный а пятый черный и т.д.

[Андрей Федоров]

можно. используйте псевдокласс :nth-child()...

[50VAJJ]

Андрей Федоров: каждому li свой класс?

[Андрей Федоров]

50VAJJ: вы почитайте. там можно формулу задать. например :nth-child(4n+1) - это 1, 5, 9 и т.п.

Answer 2

[dom1n1k]

Правильный ответ:

<ul>
    <li><a href="#">Что-то</a></li>
</ul>

li > a {
    display: block;
}

Конечно, в реальном коде стили лучше вешать не на теги, а на классы. Тут просто принцип.

Answer 3

[Astrohas]

<ul>
        <li>
           <a href="адрес_обязателен">Что-то</a>
        </li>
 </ul>

Answer 4

[Michael_Fair]

li {
  border: 1px solid red;
  list-style-type: none;
  width:fit-content;    /*Ширина li будет зависит от содержимого*/
  border-radius: 10px;  /*Радиус закругления углов*/
  overflow: hidden;	/* Скрывает содержимое, которое не помещается в li.  
 }                        В нашем случае, мы закруглили углы, но желтый фон ссылки выглядывает, 
                          поэтому ИСПОЛЬЗУЕМ эту строчку */


a {
  display: inline-block;     /* Инлайн-блок, чтобы работали padding'и */
  padding:15px 80px;
  text-decoration: none;
  background-color: yellow;
}