mincss右對齊navbar

我使用mincss及其導航欄，但我努力創建一個右對齊的鏈接。該鏈接顯示在右側，但其垂直位置不一致。mincss右對齊navbar

這是我到目前爲止有：

<!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>

正如你所看到的，將不能正常使用的這兩個項目對準右側的最後一個項目左邊。

這是因爲標題和下一個元素的文本高度不同。當元素向右浮動時，它似乎忘記了我收集的垂直位置。

有沒有辦法解決這個問題？

來源

2016-07-23 Mew

提供的jsfiddle解決你的問題 – Thinker

@Thinker還好，補充說。 – Mew

究其原因，行高是關閉是因爲unfloated元素都遵循從.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>

來源

2016-07-23 14:13:43 Toby

不是一個完美的解決方案，但你可以只添加：

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

來源

2016-07-23 14:10:59

mincss右對齊navbar

回答

相關問題