mincss right align navbar

Я использую mincss и его навигатор, но я изо всех сил пытаюсь создать выравнивание по правому краю. Ссылка показана с правой стороны, но ее вертикальное положение несовместимо.mincss right align 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>

jsfiddle

Как вы можете видеть, последний элемент справа делает правильно не выравнивать с двух элементов на левая сторона.

Это связано с различием в высоте текста заголовка и следующих элементов. Когда элемент перемещается вправо, он, кажется, забывает о вертикальном положении, в котором он находился, из того, что я собираю.

Есть ли способ исправить это?

источник

2016-07-23 Mew

обеспечивают jsfiddle, чтобы решить вашу проблему – Thinker

@Thinker хорошо, добавляемые. – Mew

Причина высота строки выключена потому, что unfloated элементы следуют line-height от большего текста в .container.

Мой личный подход заключается в том, чтобы установить каждую ссылку на float, а затем отрегулировать высоту линии для всех элементов - это позволяет использовать какое-то «магическое число» для настройки этого элемента.

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 right align navbar

ответ

Смежные вопросы