我正在开发我的第一个网站,但我遇到了导航栏问题。我正在使用 CSS 规则来对齐栏,但不幸的是,当我将规则设置为 float:right;
时,我的文本向右浮动,但它在栏上向后排列。如何将文本 float 到右侧并正确对齐文本?
.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>
最佳答案
您需要 float ul
列表,而不是单个列表项 li
。
在 li
上设置 float: right
允许第一个列表项首先向右对齐,然后其余项以类似的方式占据它们的位置。它导致列表的方向从右到左。
.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>
关于html - 导航栏文本向后对齐 (CSS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32768668/