导航栏文本向后对齐(CSS) [英] Navigation Bar text aligning backwards (CSS)

问题描述

我正在开发自己的第一个网站，而导航栏则有问题.我使用CSS规则对齐栏，但不幸的是，当我将规则设置为float:right;时，我的文本向右浮动，但在栏上向后对齐.如何将文本浮动到右侧并正确对齐文本?

I'm in the process of developing my first website and I'm having an issue with the Navigation Bar. I'm using CSS rules to align the bar but unfortunately when I set the rules to float:right; my text is floating right but it’s lining up backwards on the bar. How can I float the text over to the right and align the text correctly?

.nav ul li {
  display: inline-block;
  float: right;
  padding: 10px 10px;
}
.nav {
  background-color: black;
  position: fixed;
  width: 100%;
  top: 0px;
  margin: auto;
  font-weight: bold;
  border-bottom: 2px solid orange;
  margin-top: 5px;
}
.nav ul li a {
  color: orange;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0px 10px;
}

<div class="nav">
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
    <li><a href="#">Portfolio</a>
    </li>
    <li><a href="#">FAQ</a>
    </li>
  </ul>
</div>

推荐答案

您需要浮动ul列表，而不是单个列表项li.

You need to float the ul list, not individual list items li.

在li上设置float: right可使第一个列表项首先向右对齐，然后其余项目以类似的方式占据其位置.它导致了列表从右到左的方向.

Setting float: right on li allows the first list item to align to the right first and then the rest of the items take their positions similarly. It caused the direction of the list from right to left.

.nav ul {
  float: right; /* Added */
}
.nav ul li {
  display: inline-block;
  padding: 10px 10px;
  /* float: right; Removed */ 
}
.nav {
  background-color: black;
  position: fixed;
  width: 100%;
  top: 0px;
  margin: auto;
  font-weight: bold;
  border-bottom: 2px solid orange;
  margin-top: 5px;
}
.nav ul li a {
  color: orange;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0px 10px;
}

<div class="nav">
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
    <li><a href="#">Portfolio</a>
    </li>
    <li><a href="#">FAQ</a>
    </li>
  </ul>
</div>

这篇关于导航栏文本向后对齐(CSS)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！