CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Joel Hoelting
Joel Hoelting

Reputation: 1992

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 <a> tag directly. Any input would be appreciated.

<aside>
  <div class="container">
	<nav>
	  <ul>
	      {% 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 -->**
	  </ul>
	</nav>
  </div>
</aside>

Upvotes: 0

Views: 1118

Answers (2)

Dan Zuzevich
Dan Zuzevich

Reputation: 3831

Here's your solution Bro Nameth. Just make a rule inside your custom css file like this. Notice I gave the container and id of hello as well.





   #hello li:nth-child(3) {
text-align:right
}

ul {
list-style:none;
}


<aside>
  <div id="hello" class="container">
	<nav>
	  <ul>
	      {% 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 -->**
	  </ul>
	</nav>
  </div>
</aside>

Upvotes: 0

JackHasaKeyboard
JackHasaKeyboard

Reputation: 1665

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).

Upvotes: 1

Related Questions