Question

我正在使用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>

jsfiddle

如您所见，右侧的最后一项与左侧的两个项目没有正确对齐。

这是因为标题和下一个元素的文本高度不同。当一个元素浮动到右边时，它似乎忘记了我所收集的垂直位置。

有没有办法解决这个问题？

Answer 1

线条高度关闭的原因是，未展开的元素会跟随line-height中较大文字的.container。

我个人的方法是将每个链接设置为浮动，然后调整所有项目的行高 - 这样可以避免使用某种“幻数”来调整这一项。

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>

Answer 2

不是一个完美的解决方案，但您可以添加：

.rightalign {
  float: right;
  padding-top:7px;
}

mincss右对齐导航栏

2 个答案: