html - 将导航栏列表项拉到右侧

Question

我无法在导航栏的最后一个列表项上进行简单的向右拉，同时将其他三个元素保持在左侧。尝试了一些不同的东西，包括 float:right;在有问题的列表项上。 Bootstrap 有一个“pull-right”类，它只有 float:right;在里面。我也试过 float:right;在 <a> 上直接贴标签。任何输入将不胜感激。

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

Answer 1

直接在 li 元素上调用 float: right 有效。

不过，我不建议这样做，li 是一个 block 元素，给它一个 float 会将它折叠成类似于 display: inline-block 的东西，这与其他元素，可能会把事情搞砸。

text-align: right 怎么样？这会将文本粘贴到右边缘(因为它是 block 元素并且占据了整个宽度)。