Есть ли симпатичнее и/или лучший способ, чтобы выровнять некоторые -elements в a
nav
справа, в то время как все остальные на левой стороне, чем при использовании поплавков? float:right
перемещает перемещенные элементы в верхнюю часть nav
вместо того чтобы держать их там, где они были раньше, по высоте.
Это должно быть достаточно распространенной проблемой, чтобы иметь хорошее решение. clear:both;
то и clear:both;
-divs или css для исправления ущерба не являются действительно хорошими решениями.
Это в основном код, который у меня есть.
<nav>
<!-- left-aligned -->
<a href="#"><img src="img/logo.svg" /></a>
<a href="#">Foo</a>
<a href="#">Bar</a>
<!-- right-aligned -->
<a href="#">Potato</a>
<a href="#">Tomato</a>
</nav>
Добавьте классы в свои a, как показано в html.
HTML:
<nav>
<!-- left-aligned -->
<a class="left" href="#"><img src="img/logo.svg" /></a>
<a class="left" href="#">Foo</a>
<a class="left" href="#">Bar</a>
<!-- right-aligned -->
<a class="right" href="#">Potato</a>
<a class="right" href="#">Tomato</a>
</nav>
и css:
nav .left {
float: left;
}
nav .right {
float: right;
}
Кроме того, после того, как вы это сделаете, и если это не сработает, вы можете захотеть, чтобы ваша ширина навигатора была достаточно длинной, поэтому они не все скручиваются вместе. Например nav { width: 100%; }
nav { width: 100%; }