0

我有一个标题和一个导航菜单，需要分别在同一行上左右对齐。

我的研究告诉我，这可以使用float: left和float: rightwith来完成clear: both。当文本大小相同时，这确实有效，但是当标题的字体大小大于导航菜单时，导航菜单不与行的底部对齐，它与顶部对齐，如下所示：

_____     _____         ___ 
  |    |    |    |     |                                    Link 1    Link 2    Link 3
  |    |    |    |     |___
  |    |    |    |___  |___

我想要实现的是：

_____     _____         ___ 
  |    |    |    |     |    
  |    |    |    |     |___
  |    |    |    |___  |___                                 Link 1    Link 2    Link 3

我在这里做了一个小提琴

我怎样才能让导航菜单位于该行的底部？

4

2 回答 2

1

我已经修改了你的 jsFiddle 并使它正确：http: //jsfiddle.net/Z3a6Z/8/

以下是我在 CSS 中所做的主要更改：

#menu
{
    position: relative;
    float: right;
    height : 100px;    
    width: 160px;
}

#menu ul {
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
}
于 2012-12-05T15:05:08.213 回答
0

你可以给他们相等height的 s 然后在链接padding-top上使用div-

请记住从 中减去padding-top以height保持相同的实际高度。

这是一个http://jsfiddle.net/gUFy8/1/ JSFiddle 示例

这是您的小提琴的更新。为标题 div 添加了高度，为菜单 div 添加了高度和填充 http://jsfiddle.net/Z3a6Z/3/

您将需要调整高度和填充量以获得完美的阵容。

于 2012-12-05T14:54:10.707 回答