Question

我希望在页面顶部有一个左对齐的导航栏，但在菜单项之前（即左侧），我想要一些文字（“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上使用<td>）轻松实现预期效果，但由于浮动列表似乎是推荐标准，我想知道它们是否可行。（虽然我真的不明白animus人似乎反对使用表格进行布局。）

Answer 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中的任何内容，因为它具有更高的优先级。< / p>

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

CSS垂直对齐浮动<li> </li>

1 个答案: