0

我正在尝试创建一个均匀分布的导航菜单，无论菜单项是 1 行还是 2 行文本。我使用 1 行文本进行此操作，但如果某个项目超过一行，则文本的垂直间距会关闭。

到目前为止，我的代码如下。任何帮助都是极好的。提前致谢。

jsfiddle：http: //jsfiddle.net/wnfUC/

风格：

       #pageNavigation {
        background-image: url('../Images/TIBC_Base/nav-bg.png');
        background-repeat: repeat-y;
        margin:5px 0;
        padding:5px 15px 5px;
        min-height:125px;
}
    #pageNavigation_bottom
    {
        clear:both;
        background-image: url('../Images/TIBC_Base/nav-bg_bottom.png');
        background-repeat: no-repeat;
        margin:-5px 0 0 -1px;
        min-height:8px;
    }
    #pageNavigation .navContent{ width:240px; margin:0 -10px; }
    #pageNavigation ul { list-style-type: none; margin:0; padding:0; }
    #pageNavigation ul li { display: block; height:57px; border-top:0px #E1E1E1 solid; border-bottom:1px #E1E1E1 solid; text-align:center; overflow:hidden; }
    #pageNavigation a  {
        color:#485963;
        font-size:16px;
        text-decoration:none;
        text-shadow: 0px -1px #EEEEEE;
        display:block;
        height:57px;    
    }
    #pageNavigation a:hover
    {
        background: #FAE2AD;
        color: #485963;
    }
    #pageNavigation a.NavigationSelected
    {
        color:#F9F9F9;
        background: #A5B5BE;
        text-shadow: 1px 1px #485963;
        font-weight: normal;
    }

HTML

    <div id="pageNavigation">
<ul class="navContent">
<li><a href="/Services">Services</a></li>
<li><a href="/Services/Analysis">Analysis</a></li>
<li><a href="/Services/Strategic-Planning">Strategic Planning</a></li>
<li><a href="/Services/International-Market-and-Competitor-Research">International Market and Competitor Research</a></li>
<li><a href="/Services/Budgeting-and-Forecasting">Budgeting and Forecasting</a></li>
<li><a href="/Services/International-Cultural-Liaison" class="NavigationSelected">International Cultural Liaison</a></li>
</ul>
</div>
4

3 回答 3

2

您可以使用 CSS 表格布局（不是 HTML 表格元素，嗯！）来实现这一点：http: //jsfiddle.net/PhilippeVay/ZszJm/

ul使用与表格相同的算法显示，链接使用与单元格相同的算法，此处li显示为行，因为它是垂直的。vertical-align然后你可以随心所欲地玩:)（在你的情况下middle）
你可以添加table-layout: fixed，ul然后浏览器将使用另一种算法来显示表格，这种算法不会尝试调整单元格的宽度和高度以适应他们的内容，但会坚持 CSS 规则所说的内容。

兼容性：IE8及以上。它不会以 IE7 和 6 为中心，没什么大不了的。

编辑：使用这种方法，您无需提前知道哪些项目比其他项目长。浏览器会想到这一点。

于 2012-10-18T17:15:45.220 回答
0

文本的垂直对齐通常使用以下方式完成：http line-height: //jsfiddle.net/Shmiddty/wnfUC/1/

#pageNavigation a  {
    ...
    height:57px;  
    line-height:57px;        
}
#pageNavigation a.two-line{
    line-height:20px;
    padding-top:10px;    
}

请注意，我将类添加two-line到跨越两行的锚元素。

于 2012-10-18T17:08:19.980 回答
0

您可以使用此方法： http ://css-tricks.com/vertically-center-multi-lined-text/

您还可以使用其他一些方法，但它们需要额外的 HTML 标记，而这个不需要。

于 2012-10-18T17:16:51.310 回答