我想在页面顶部有一个左对齐的导航栏，但在菜单项之前(即左侧)，我想要一些文本(“John Doe”)，(i)具有比菜单项大得多的字体大小，但 (ii) 具有与菜单项相同的基线。
据我所知，首选/推荐的导航栏方式是使用 float 的 <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> 的底部？
我应该说:我可以通过使用表格而不是 float 列表(在菜单 vertical-align:bottom 的上使用 <td> )轻松达到预期效果，但由于 float 列表似乎是推荐的标准，我想知道他们是否有可能。 (虽然我真的不明白人们似乎反对使用表格进行布局的敌意。)
最佳答案
不需要用float，其实不用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 中的任何内容，因为它具有更高的优先级。
表格之所以不好，主要是因为它们的加载方式，据我所知，它们需要在加载内容之前构建整个表格，而使用单个元素可以根据需要加载，或者其他影响，我是确保其他人可以更好地解释该部分。
关于CSS 垂直对齐 float <li>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18543624/