的QuickFix

Question

在此索引页面中：http://www.apxhotels.com有8颗钻石和酒店名称。而不是文本我想要图像上的元素以及文本。我需要在CSS中进行哪些更改才能实现此目的？

以下是我目前使用的CSS：

.content_menu{ 
    width:1210px;
    float:left;
    position:absolute;
    top:-87px
    height:96px;
    z-index:10
}
.content_menu ul li{ 
    margin-right:20px; 
    background:url(../images/menu_down.png); 
    width:113px; 
    height:96px; 
    display:inline-block; 
    text-align:center;
}
.content_menu ul li a:hover{
    color:#939598;
}
.content_menu ul li a{
    font-family: Cambria; 
    color:#fff; 
    font-size:14px; 
    text-align:center;
    position:relative; 
    top:46px;
}
.content_menu ul li:last-child{
    margin-right:0px;
}
.content_menu ul{
    margin-left:0px;
}

Answer 1

的QuickFix

将以下css声明添加到样式表的定义中：

.content_menu ul li a {
    ... 
    line-height: 89px; /* height of parent <li> minus padding-top of this link */
    display: block;
    padding-top: 7px; /* instead of 46px as currently defined in your css */
}

并从同一规则集中删除这两个：

position: relative;
top: 46px;

这将做两件事：首先设置display: block;，确保您的链接充分利用周围的<li>，扩展水平可点击区域。然后通过相应地设置lineheight，使链接与列表项一样高。完成！

需要帮助改善CSS中的背景图像

1 个答案:

的QuickFix