Joel B Joel B - 7 months ago 17
CSS Question

Pull navbar list item to the right

I'm having trouble doing a simple pull-right on the last of my navbar's list items while keeping the other three items to the left. Tried a few different things, including float:right; on the list item in question. Bootstrap has a "pull-right" class, which just has float:right; within it. I've also tried float:right; on the

tag directly. Any input would be appreciated.

<div class="container">
{% for page in site.pages %} {% if page.title %}
<li><a href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a></li><!-- This is two list items -->
{% endif %} {% endfor %}
<li><a href="{{ "/blog" | prepend: site.baseurl }}">Blog</a></li>
<li><a href="{{ "/portfolio" | prepend: site.baseurl }}">About</a></li>**<!--Trying to pull this list item to the right -->**


Calling float: right directly on the li element worked.

I wouldn't recommend that though, li is a block element and giving it a float collapses it into something akin to display: inline-block which is inconsistent with the other elements and might mess things up.

How about text-align: right? That'll stick the text to the right edge (because it's a block element and it occupies the entire width).