列表样式尽可能接近菜单的文字

Question

HTML

<ul id="navi"> 
    <li><a herf="http://google.com">Home</a></li>
    <li><a herf="#">About</a></li>
    <li><a herf="#">Contact</a></li>
    <li><a herf="#">Opc #1</a></li>
    <li><a herf="#">Opc #1</a></li>
</ul>

CSS

#navi
{
list-style-type: circle;
}

#navi li { 
    float:left; 
    list-style-position: inside;
}

#navi li a
{
/*text-decoration: none;*/
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navi li a:hover
{
color: #fff;
background-color: #369;
}

如你所见，圆圈在填充的外面，我需要圆圈尽可能靠近填充内的单词。

有什么建议吗？

Answer 1

设置 <li> 元素的样式，而不是其中 <a> 元素的样式。

此外，herf 不是属性 - 您正在寻找 href。

DEMO

#navi {
  list-style-type: circle;
}

#navi li { 
  float:left; 
  list-style-position: inside;
}

#navi li {
  padding: .2em 1em;
  color: #fff;
  background-color: #036;
}

#navi li:hover {
  background-color: #369;
}

#navi li a {
  display: block;
  width: 100%;
  height: 100%;
  
  text-decoration: none;
  color: #fff;
}

<ul id="navi"> 
  <li><a href="http://google.com">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Opc #1</a></li>
  <li><a href="#">Opc #1</a></li>
</ul>

阅读奖励material：

HTML Attribute Reference

列表样式尽可能接近菜单的文字

list style as closely as possible to the word of the menu

css

menuitem