CSS导航栏不向右浮动
CSS导航栏不向右浮动
提问于 2019-03-05 03:52:44
我需要最后一个标签(大约)浮动到右边，其他的在左边。它都漂浮在左边。
<div class="nav">
<ul>
<li><a href="/ghaines1/">HOME</a></li>
<li><a href="/ghaines1/cosc231/">COSC 231</a></li>
<li><a href="/ghaines1/cosc231/8ball.html">MAGIC 8 BALL</a></li>
<li><a href="/ghaines1/cosc231/proj4.html" id="aboutRight">ABOUT</a></li>
</ul>
</div>
a {
color:#b7b7b7;
text-decoration:none;
}
body {
background-color:#0d0d0d;
font-family:Tahoma;
color:#ffffff;
text-align:center;
margin:0;
}
#lines {
line-height:.3px;
}
hr {
width:30%;
}
#page {
text-align:left;
}
div {
margin:0 auto;
text-align:center;
}
img {
width:50%;
border:1px solid white;
}
.nav {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.nav div {
width:100%;
position: fixed;
}
.nav ul {
list-style-type: none;
width:100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #dbdbdb;
}
.nav li {
float: left;
}
.nav li a {
color: white;
text-align: center;
display: block;
padding: 12px 16px;
text-decoration: none;
-o-transition:.25s;
-ms-transition:.25s;
-moz-transition:.25s;
-webkit-transition:.25s;
transition:.25s;
}
.nav li a:hover {
background-color: #efefef;
}
.aboutRight {
position: fixed;
float: right;
left: 100px;
}回答 1
Stack Overflow用户
发布于 2019-03-05 04:11:37
首先，要有aboutRight .aboutRight类的样式，并且你的链接ID是<li><a href="/ghaines1/cosc231/proj4.html" id="aboutRight">ABOUT</a></li>。将id重写到class中，因为使用id设置样式是一种不好的做法。
其次，你不需要这种风格的position:fixed;，它不会在父容器中占用空间，你需要这个链接与其他链接处于相同的位置。
第三，不应将该类应用于<a>标记，而应将其应用于<li>元素，因为您希望将<li>放在<ul>中的右侧，而不是<a>放在<li>中
最后，由于您有此规则.nav li { float: left; }，并且希望为某个li覆盖它，因此应该编写更具体的选择器，而不仅仅是一个类，例如nav li.aboutRight
我用工作代码为您创建了一个代码片段。
a {
color:#b7b7b7;
text-decoration:none;
}
body {
background-color:#0d0d0d;
font-family:Tahoma;
color:#ffffff;
text-align:center;
margin:0;
}
#lines {
line-height:.3px;
}
hr {
width:30%;
}
#page {
text-align:left;
}
div {
margin:0 auto;
text-align:center;
}
img {
width:50%;
border:1px solid white;
}
.nav {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.nav div {
width:100%;
position: fixed;
}
.nav ul {
list-style-type: none;
width:100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #dbdbdb;
}
.nav li {
float: left;
}
.nav li a {
color: white;
text-align: center;
display: block;
padding: 12px 16px;
text-decoration: none;
-o-transition:.25s;
-ms-transition:.25s;
-moz-transition:.25s;
-webkit-transition:.25s;
transition:.25s;
}
.nav li a:hover {
background-color: #efefef;
}
.nav li.aboutRight {
float: right;
left: 100px;
}<div class="nav">
<ul>
<li><a href="/ghaines1/">HOME</a></li>
<li><a href="/ghaines1/cosc231/">COSC 231</a></li>
<li><a href="/ghaines1/cosc231/8ball.html">MAGIC 8 BALL</a></li>
<li class="aboutRight"><a href="/ghaines1/cosc231/proj4.html" id="aboutRight">ABOUT</a></li>
</ul>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54990577
复制相关文章
相似问题
腾讯云开发者
