CSS垂直对齐浮动<；李>；
我希望在页面顶部有一个左对齐的导航条，但在菜单项之前（即，在菜单项的左侧），我希望有一点文字（“John Doe”）（I）字体比菜单项大得多，但（ii）与菜单项具有相同的基线 据我所知，制作导航栏的首选/推荐方法是使用浮动的CSS垂直对齐浮动<；李>；,css,css-float,html-lists,vertical-alignment,Css,Css Float,Html Lists,Vertical Alignment,我希望在页面顶部有一个左对齐的导航条，但在菜单项之前（即，在菜单项的左侧），我希望有一点文字（“John Doe”）（I）字体比菜单项大得多，但（ii）与菜单项具有相同的基线 据我所知，制作导航栏的首选/推荐方法是使用浮动的。但是，我还没有找到一种方法来使用左浮动列表，并使菜单与左侧文本的基线对齐。我目前的CSS和HTML是： <html> <head> <style> #navdiv { overflow:hidden; border-bottom:soli
<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>
#导航师{
溢出：隐藏；
边框底部：实心1px红色；
}
#导航{
列表样式：无；
保证金：0；
填充：0；
}
#导航李~李{
浮动：左；
边框：纯色1px蓝色；
宽度：100px；
}
#名字{
浮动：左；
边框：纯色1px蓝色；
字体大小：40px；
宽度：250px；
}
我应该说：我可以通过使用表格而不是浮动列表（使用菜单
vertical align:bottom#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;
}