mincss右揃え

私はmincssとそのnavbarを使用していますが、右寄せのリンクを作成するのは難しいです。右側にリンクが表示されていますが、垂直位置が一致していません。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つの項目と一致していません左側。

これは、タイトルと次の要素のテキストの高さが異なるためです。要素が右に浮かんでいるとき、それは私が集めたものからの垂直位置を忘れているようです。

これを修正する方法はありますか？

出典

2016-07-23 Mew

が@Thinkerは大丈夫、追加 – Thinker

あなたの問題を解決するためにjsfiddleを提供しています。 – Mew

行の高さがオフになっている理由があります。

私の個人的なアプローチは、各リンクをフロートに設定してから、すべての項目の行の高さを調整することです。これにより、ある種の「マジックナンバー」を使用してその項目を調整することはありません。

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

ない完璧なソリューションが、あなただけ追加することができます。unfloated要素は.containerで大きなテキストからline-heightをたどるため

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

出典

2016-07-23 14:10:59

答えて

関連する問題