1

我有一个 CSS 水平菜单，它有一个顶部边框和下面的文本。

我需要在边界线中心的顶部边界下获取文本：

#topbar {
    width:100%;
    height:80px;
    background-color:#000000;
}
#topbar-inner {
    width:1000px;
    margin:0 auto 0 auto;
}
#logo {
    display:inline;
    float:left;
    color:#FFFFFF;
}
#menu {
    display:inline;
    float:right;
}
#menu > ul > li {
    display:inline-block;
/*    border-top:4px solid #666666; */
    margin-right:20px;
   /* padding-top:20px; */
    min-width:120px;
}
#menu > li {
    display:inline-block;
    list-style:none;
    /* margin-top:25px; */
    margin-left:auto;
    margin-right:auto;
}
#menu > li:hover {
    color:#FFFFFF;
}
#menu li a {
    display:block; 
    padding-top:25px;   
    border-top:4px solid #CCCCCC;
    color: #CCCCCC;
    text-decoration:none;
}
#menu li a:hover { 
    border-color:#FFFFFF; 
    color:#fff
}

JS 小提琴：http: //jsfiddle.net/y75WZ/

有什么想法我能做什么？

4

4 回答 4

0

...你的意思是text-align:center在清单项目上？

于 2013-06-27T11:20:37.320 回答
0

http://jsfiddle.net/y75WZ/1/

使用简单的text-align: center;.

#menu li a {
    text-align: center;
    /* ... */
}

顺便提一句。你在这里尝试什么：

#menu没有任何直系后代是li.

#menu > li {
    display:inline-block;
    list-style:none;
    /* margin-top:25px; */
    margin-left:auto;
    margin-right:auto;
}
#menu > li:hover {
    color:#FFFFFF;
}
于 2013-06-27T11:20:38.640 回答
0

使用下面的 css

#menu li a {
    display:block; 
    padding-top:25px;   
    border-top:4px solid #CCCCCC;
    color: #CCCCCC;
    text-decoration:none;
    text-align: center;
}

我刚刚更改了您的代码，下面是新的小提琴，它是您的代码的修改版本。检查下面的小提琴 http://jsfiddle.net/y75WZ/3/

于 2013-06-27T11:22:23.223 回答
-1

text-align:center对于liora里面的标签li应该这样做。

#menu li a {
    display:block; 
    padding-top:25px;   
    border-top:4px solid #CCCCCC;
    color: #CCCCCC;
    text-decoration:none;
    text-align:center;
}

或者 

#menu li {
     text-align:center;
}
于 2013-06-27T11:33:43.653 回答