html - CSS -Menu 作为 使用背景而不仅仅是文本

Question

我的菜单代码工作正常，但只有文本是 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>

我的 CSS:

    #menu{
        background-image: url("images/menubg.png");
        background-repeat: repeat-x;
        height: 44px;
        width: 983px;
        margin: 0 22px;          
    }

    .spacer{
        background-image: url("images/menu_spacer.png");
        background-repeat: no-repeat;
        width: 1px;
        height: 25px;
        margin: 0px 12px;
    }
#menu ul{
    list-style-position: inside;    /* Bodka v novom riadku vo vnutry */
    list-style-type: none;          /* bez bodky */
}

#menu ul li{   
    padding: 0px 5px 0px 0px;
    display: inline-block;
    color: #f7f7f7;
}

.arrow{
    background-image: url("images/sipka.png");
    background-repeat: no-repeat;
    width: 10px;
    height: 8px;
    margin-left: 8px;
    display: inline-block; 
}

实时预览:http://funedit.com/andurit/try4/

Answer 1

您的标记可以大大简化为:

<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>

Flexbox 解决方案

如果您愿意探索现代 CSS 规范，您始终可以使用 flexbox 而不是依赖内联 block 来定位您的元素——查看此处的演示 fiddle :http://jsfiddle.net/teddyrised/9FZS8/

#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;
}

---

非 Flexbox 解决方案

否则，您始终可以退回到 float 您的个人 <a>元素，但这需要您仔细计算每个元素的填充，以免菜单溢出:http://jsfiddle.net/teddyrised/9FZS8/2/

#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;
}