右对齐导航栏
右对齐导航栏
提问于 2016-07-23 13:47:09
我正在使用mincss和它的导航栏，但我正在努力创建一个右对齐的链接。链接显示在右侧，但其垂直位置不一致。
这就是我到目前为止所知道的：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://mincss.com/entireframework.min.css" />
</head>
<body>
<nav class="nav" tabindex="-1" onclick="this.focus()">
<div class="container" style="overflow: hidden;margin-top: 0px;">
<a class="pagename current" href="#">My Title Here</a>
<a href="#">item</a>
<a href="#">item</a>
<a href="#" style="float: right;">item</a>
</div>
</nav>
<button class="btn-close btn btn-sm">×</button>
</body>
</html>
正如您所看到的，右侧的最后一项没有与左侧的两项正确对齐。
这是因为标题和下一个元素的文本高度不同。当一个元素向右浮动时，它似乎忘记了从我收集的数据中它所处的垂直位置。
有没有办法解决这个问题？
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-07-23 14:13:43
行高为off的原因是因为未浮动的元素跟随.container中较大文本的line-height。
我个人的方法是将每个链接设置为浮动，然后调整所有项目的行高-这避免了使用某种“魔术数字”来调整这一个项目。
https://jsfiddle.net/tobyl/7qu64ax6/
CSS：
.leftalign {
float: left;
}
.rightalign {
float: right;
}
.leftalign, .rightalign {
line-height: 35px;
}HTML：
<div class="container">
<a class="pagename current leftalign" href="#">My Title Here</a>
<a class="leftalign" href="#">item</a>
<a class="leftalign" href="#">item</a>
<a href="#" class="rightalign">item</a>
</div>Stack Overflow用户
发布于 2016-07-23 14:11:00
这不是一个完美的解决方案，但您可以添加以下内容：
.rightalign {
float: right;
padding-top:7px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38542487
复制相关文章
相似问题
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
