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

在链接中添加x的填充和-x的边距，例如：

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

Answer 2

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

<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而不是依靠inline-block来定位元素 - 请在此处查看演示小提琴：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解决方案

否则，您可以随时回退到浮动单个<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;
}

Answer 3

建立链接占用空间：

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

CSS -Menu工作为<a href=""> with background not just text</a>

3 个答案:

Flexbox解决方案

非Flexbox解决方案