0

我想在页面顶部有一个左对齐的导航栏，但在菜单项之前（即左侧），我想要一些文本（“John Doe”），（i）比菜单项更大的字体，但 (ii) 与菜单项具有相同的基线。

据我了解，做导航栏的首选/推荐方式是使用浮动<li>的。但是，我还没有找到一种使用左浮动列表的方法，并且还没有让菜单与左侧文本对齐到相同的基线。我当前的 CSS 和 HTML 是：

<html>
<head>
<style>
#navdiv {
overflow:hidden;
border-bottom:solid 1px red;
}
#nav {
list-style:none;
margin:0;
padding:0;
}
#nav li~li {
float:left;
border:solid 1px blue;
width:100px;
}
#name {
float:left;
border:solid 1px blue;
font-size:40px;
width:250px;
}
</style>
</head>

<body>
<div id='navdiv'>
<ul id='nav'>
<li id='name'>John Doe</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</body>
</html>

有没有办法将所有左浮动<li>的垂直对齐到容器的底部<div>？

我应该说：我可以通过使用表格而不是浮动列表（vertical-align:bottom在 menu 上使用<td>）轻松实现预期效果，但是由于浮动列表似乎是推荐的标准，我想知道是否可以使用他们。（虽然我真的不明白人们似乎反对使用表格进行布局。）

4

1 回答 1

1

不需要用float，其实不用比较好，直接设置显示类型为table-cell即可

#navdiv {
overflow:hidden;
border-bottom:solid 1px red;
}

#nav {
list-style:none;
margin:0;
padding:0;
}

#nav li {
display: table-cell;
vertical-align: bottom;
border:solid 1px blue;
width:100px;
}

#nav li#name {
font-size:40px;
width:250px;
}

此外，额外的边框样式是不必要的，只需将选择器更改为#nav li 和#nav li#name，您就可以用#nav li#name 中的内容取代#nav li 中的任何内容，因为它具有更高的优先级。

表格很糟糕，主要是因为它们的加载方式，据我所知，它们需要在加载内容之前构建整个表格，而使用单个元素可以随意加载，或者有影响的东西，我相信其他人可以更好地解释那部分。

于 2013-08-31T01:53:10.990 回答