Question

我在导航栏的最后一个列表项上做了一个简单的右拉，同时保留了左边的其他三个项目。尝试了一些不同的东西，包括浮动：正确;在列表项目上。 Bootstrap有一个＆＃34; pull-right＆＃34; class，只有浮动：对;在其中。我也试过漂浮：对;直接在<a>标记上。任何意见都将不胜感激。

＆＃13;

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

＆＃13;

Answer 1

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

我不建议这样做，li是一个块元素并给它一个浮点数将其折叠成类似于display: inline-block的东西，这与其他元素不一致，可能会搞砸。< / p>

text-align: right怎么样？这会将文本粘贴到右边缘（因为它是一个块元素，它占据整个宽度）。

Answer 2

这是你的解决方案Bro Nameth。只需在您的自定义css文件中制定规则，就像这样。注意我也给了容器和你好的id。

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

将导航栏列表项拉到右侧

2 个答案: