Как я могу исправить эту маленькую проблему при создании ссылок с закругленными вкладками?

Question

Вот живой пример:

http://jsfiddle.net/Pzvdv/

<ul id="navigation">
    <li><a href="#">HOME</a></li>
    <li><a href="#">OUR APPROACH</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">GET IN TOUCH</a></li>    
</ul>

#navigation {
    float: left;
    list-style-type: none;
}

#navigation li {    
    background-color: #934B00;
    border-radius: 6px 6px 0 0;
    color: White;
    cursor: pointer;
    float: left;
    font-size: 12px;
    margin-right: 6px;
    padding: 5px;
}

#navigation li a:link {
    color: White;
    text-decoration: none;
}

Обратите внимание, как я могу нажать на ссылку, если я осторожен, но когда я нажимаю на саму «таблетку таблетки», ссылка не нажата.

Есть ли обходной путь или более эффективные способы достижения этого визуального эффекта?

Я хочу перейти по ссылке, если пользователь нажимает на настоящие буквы или таблетку контейнера.

Answer 1

Отступы и другие стили должны быть перемещены с <li> на <a>.
Кроме того, вам необходимо добавить display:block или display:inline-block к якору.

В настоящее времяваш код работает не так, как ожидалось, поскольку заполнение <li> добавляет разрыв между границей <li> s и якорем.

http://jsfiddle.net/Pzvdv/9/

#navigation li {    
    color: White;
    cursor: pointer;
    float: left;
    font-size: 12px;
    margin-right: 6px;
}

#navigation li a:link {
    display: block;               /* Or inline-block */
    color: White;
    text-decoration: none;
    background-color: #934B00;
    border-radius: 6px 6px 0 0;
    padding: 5px;
}

Answer 2

Если вы добавите некоторый отступ к элементу ссылки, например:

#navigation li a {
    padding:5px
}

Это должно работать.

Answer 3

Вы должны стилизовать сам элемент <a>.

#navigation {
    float: left;
    list-style-type: none;
}

#navigation li a:link {
    color: White;
    text-decoration: none;
    background-color: #934B00;
    border-radius: 6px 6px 0 0;
    color: White;
    cursor: pointer;
    float: left;
    font-size: 12px;
    margin-right: 6px;
    padding: 5px;
}

Answer 4

Вы добавляете все стили представления к элементам li вместо реальных ссылок, просто переключите их, и ваше меню таблетки будет работать нормально:

#navigation li {
    float:left;
}

#navigation li a {    
    background-color: #934B00;
    border-radius: 6px 6px 0 0;
    color: White;
    cursor: pointer;
    font-size: 12px;
    margin-right: 6px;
    padding: 5px;
}

Answer 5

Как это?http://jsfiddle.net/Pzvdv/17/

Answer 6

Вместо этого необходимо применить CSS для ссылки.

#navigation li {    
    float: left;
 }

#navigation li a {
  color: White;
  text-decoration: none;
  background-color: #934B00;
  border-radius: 6px 6px 0 0;
  color: White;=
  font-size: 12px;
  margin-right: 6px;
  padding: 5px;
  cursor: pointer;
}

Answer 7

Установите для отображения в виде блока, т. Е .:

a { display:block; }

И добавьте высоту / ширину к 100%, и перенесите туда все отступы. Это позволит заполнить весь элемент списка.