2

这就是我想要实现的目标，并且已经非常接近：

在此处输入图像描述

这是我的 CSS：

li {
    float: left;
    position: relative;
    padding-left: 55px;
    background: url(../../images/separator.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    height: 87px;
}       

a {
    font-size: 15px;
    line-height: 67px;
}

我快到了，但有一些问题。我想出让菜单项垂直位于分隔符中间的唯一方法是使用行高。但是现在当然当悬停在链接上时，悬停是行高的高度，我不希望这样。

另外：有没有办法让菜单项进入分隔符图像“内部”，就像在图片中一样？分隔符图像是透明的 png。如果不是，我将减少菜单项上的填充以尝试使它们更接近。

4

2 回答 2

1

第一种方法：

给链接一个高度，将其放置在距离顶部 50% 的位置，一半的高度回到顶部：

a {
    font-size: 15px;
  height:30px;
  display:block;
  position:relative;
  top:50%;
  margin-top:-15px;
}

演示 http://jsbin.com/ovaqix/1/edit

第二种解决方案

使 a 元素 display:table-cell 和 li 高度相同，然后使用垂直对齐：

a  {
  display:table-cell;
  height:87px;
  vertical-align:middle;
}

演示

http://jsbin.com/ovaqix/2/edit

表格单元格在 IE7 中不起作用

于 2013-01-06T12:31:35.953 回答
0

您是否尝试过更改 a:hover 中的高度？

为了让菜单项进入分隔符，我认为您需要在伪元素之后和之前创建伪元素，并使用边框 hack 来生成三角形。他的一些东西：

a:before {
    border-top: 38px solid transparent;
    border-bottom: 60px solid transparent;
    border-right: 60px solid black;
}

如果您提供更多详细信息，我可以更具体。

于 2013-01-06T12:31:11.413 回答