0

我正在尝试制作一个水平导航菜单，我的菜单项（li）元素是圆形的，这里是演示，我的问题是链接的文本出现在顶部，如何让它出现在中心，这可能吗，请让我知道，欢迎任何建议。谢谢

4

5 回答 5

1

只有块项目可以使用边距和填充。锚标签是内联元素。您需要强制它们成为 CSS 中的块元素：

#menu ul li a
{
    text-decoration:none;
    display:block;
    padding:30px 0 0 0;
}
于 2012-06-01T15:51:31.507 回答
1

我刚玩过你的小提琴。我所做的只是让“li”显示：inline-block 并将 li:hover 更改为 #menu li:hover。

#menu ul li
{
    float:left;
    display:inline-block;
    padding:40px 30px;
    background-color:slategray;
    margin:0 20px 0 0;
    height:17px;
   -webkit-border-radius:50px;
}
#menu li:hover
{
   -webkit-box-shadow:0 0 50px 12px #69CDF5;
  background:#cb2326;  
}

请在此处查看小提琴：http: //jsfiddle.net/Az8cG/15/

于 2012-06-01T17:03:58.693 回答
1

要回答您针对 Diodeus 发布的第二个问题：

如果你想使用纯 css3 悬停效果，你需要使用 :hover 选择器来做类似的事情：

#menu ul li a:hover {
   background-color: #000000;
   }

为了获得更好的效果，请使用您可以在此处看到的 CSS3 过渡属性：

http://www.w3schools.com/css3/css3_transitions.asp

于 2012-06-01T16:06:16.443 回答
1

与其搞乱垂直对齐，不如将 line-height 设置为等于圆的高度/宽度。

您没有采用红色背景的问题是它声明的选择器的特异性：li:hover不足以克服#menu ul li.

请参阅此处：http: //jsfiddle.net/Az8cG/11/两个修复程序。

于 2012-06-01T16:09:38.113 回答
1

如果文本超过 2 行，您可以使用它来将其保持在中间：

#menu ul li a
{
    display:table-cell;
    vertical-align:middle;
    height:85px;
    width:35px;
}

你的第二个问题的答案：

#menu ul li:hover
{
    background:red;
}
于 2012-06-01T15:58:12.580 回答