Html CSS-菜单作为<；a href>；有背景而不仅仅是文字

我的菜单代码工作正常，但只有文本是a href，我如何尝试让它更友好一点，所以在

中使用后台作为href工作，但它不工作，有人能帮我修复它吗？ 我的HTML：

 <div id="menu">
    <ul>
     <li><a href="#">GAMESITES</a><span class="arrow"></span></li>
      <li class="spacer"> </li>
      <li><a href="#">HRY<span class="arrow"></a></span></li>
      <li class="spacer"> </li>
      <li><a href="#">SERVERY</a><span class="arrow"></span></li>
      <li class="spacer"> </li>
      <li><a href="#">CLANKY</a><span class="arrow"></span></li>
      <li class="spacer"> </li>
      <li><a href="#">FORUM</a><span class="arrow"></span></li>
      <li class="spacer"> </li>
      <li><a href="#">DOWNLOADS</a><span class="arrow"></span></li>
      <li class="spacer"> </li>
      <li><a href="#">BLOGY</a><span class="arrow"></span></li>
      <li class="spacer"> </li>
      <li>FLASHOVKY<span class="arrow"></span></li>                                                
    </ul> 
  </div>

---

实时预览：

制作链接以占用全部空间：

li > a{
  display:inline-block;
  width: 100%;
  height: 100%;
}

---

在链接中添加一个空格x和一个边距-x，例如：

#menu a {
    padding: 20px;
    margin: -20px;
}

---

您的标记可以简化为：

<div id="menu">
    <ul>
        <li><a href="#">GAMESITES</a></li>
        <li><a href="#">HRY</a></li>
        <li><a href="#">SERVERY</a></li>
        <li><a href="#">CLANKY</a></li>
        <li><a href="#">FORUM</a></li>
        <li><a href="#">DOWNLOADS</a></li>
        <li><a href="#">BLOGY</a></li>
        <li><a href="#">FLASHOVKY</a></li>                                                
    </ul> 
</div>

---

非柔性箱解决方案 否则，您总是可以回退到浮动您的个人

问题是列表项没有覆盖分隔符之间的全部空间。@FabrizioCalderan因此使它们覆盖全部空间，而li元素内部使用一些css来创建可视空间（如果需要）。这将如何修复以使整个
成为a href？填充将使链接的活动区域与按钮背景的宽度和高度相同，并且负边距将使其保持在相同的位置。在这里查看：我添加了一个虚线边框，以便您可以查看活动区域。您是对的，这有点帮助，但一旦菜单中的文本长度不同，它就无法使用。文本长度没有问题，因为活动区域将围绕文本20px，请在上面的小提琴中进行检查，每个链接都有不同的宽度，这取决于文本长度。使用间隔元素是不安全的。将间隔背景指定给每个
元素后添加的伪元素怎么样？多谢了，伙计，你的建议真的很有用，我还有一个简单的问题。我在#菜单ul li a中添加了min width，使其成为页面的全尺寸，也尝试从左侧站点添加一点边距/填充文本，但如果我这样做，href位置也是边距/填充，因此不是背景工作的全尺寸href@user258459我不明白你的问题-你能重新措辞吗？菜单背景有1000像素宽，所以我需要在它的全宽上设置文本，所以我添加了每个
的最小宽度，然后我注意到文本太靠近左侧站点的结尾，所以我添加了左边距：例如20px，但它总是将a href部分移动20px。我需要修复它。希望它能够理解：（如果没有，我可以给你一些实时预览或其他东西，为什么不在第一个
上添加
左填充：20px
？当填充在内容框中时，边距总是在内容框的外面。我也尝试填充，我的菜单ulli有：左填充：10px；在它里面，就像从左开始的第一个10像素的菜单不能点击一样
<div id="menu">
    <ul>
        <li><a href="#">GAMESITES</a></li>
        <li><a href="#">HRY</a></li>
        <li><a href="#">SERVERY</a></li>
        <li><a href="#">CLANKY</a></li>
        <li><a href="#">FORUM</a></li>
        <li><a href="#">DOWNLOADS</a></li>
        <li><a href="#">BLOGY</a></li>
        <li><a href="#">FLASHOVKY</a></li>                                                
    </ul> 
</div>

#menu {
    background-image: url(http://funedit.com/andurit/try4/images/menubg.png);
    background-repeat: repeat-x;
    height: 44px;
    width: 983px;
    font-family: Arial;
}
#menu ul{
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu ul li {
    color: #f7f7f7;
    flex: 1 1 auto;
}
#menu ul li a {
    background-image: url(http://funedit.com/andurit/try4/images/menu_spacer.png);
    background-repeat: no-repeat;
    background-position: top right;
    color: #f7f7f7;
    display: block;
    padding: 14px 0;
    text-decoration: none;
    text-align: center;
}
#menu ul li:last-child a {
    background: none;
}
#menu ul li a:after {
    background-image: url(http://funedit.com/andurit/try4/images/sipka.png);
    content: '';
    width: 10px;
    height: 8px;
    margin-left: 8px;
    display: inline-block;
}

#menu {
    background-image: url(http://funedit.com/andurit/try4/images/menubg.png);
    background-repeat: repeat-x;
    height: 44px;
    width: 983px;
    font-family: Arial;
}
#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#menu ul li {
    color: #f7f7f7;
}
#menu ul li a {
    background-image: url(http://funedit.com/andurit/try4/images/menu_spacer.png);
    background-repeat: no-repeat;
    background-position: top right;
    color: #f7f7f7;
    float: left;
    padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
    text-decoration: none;
    text-align: center;
}
#menu ul li:last-child a {
    background: none;
}
#menu ul li a:after {
    background-image: url(http://funedit.com/andurit/try4/images/sipka.png);
    content: '';
    width: 10px;
    height: 8px;
    margin-left: 8px;
    display: inline-block;
}