首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS导航栏不向右浮动

CSS导航栏不向右浮动
EN

Stack Overflow用户
提问于 2019-03-05 03:52:44
回答 1查看 229关注 0票数 -1

我需要最后一个标签(大约)浮动到右边,其他的在左边。它都漂浮在左边。

代码语言:javascript
复制
<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;
}
EN

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

我用工作代码为您创建了一个代码片段。

代码语言:javascript
复制
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;
}
代码语言:javascript
复制
<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>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54990577

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档