Блог

Главная - Вопросы по программированию - Панель навигации CSS не плавает вправо

Панель навигации CSS не плавает вправо

#html #css #alignment

#HTML #css #выравнивание

Вопрос:

Мне нужно, чтобы последняя вкладка (About) плавала вправо, а остальные — влево. Все это плавает влево.

 <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. Не добавляйте мусор в свой вопрос. Это вызвало красный флаг (спам / грубость / оскорбительный) и могло легко привести к серьезному штрафу для вашей учетной записи. На этот раз я ее отредактировал. Фильтр качества установлен не просто так. Вам лучше прислушаться к его совету и улучшить контекст / детализацию в вашем вопросе, а не добавлять бессвязную чушь.

Ответ №1:

Прежде всего, у класса aboutRight должен быть стиль .aboutRight , а у вашей ссылки — идентификатор <li><a href="/ghaines1/cosc231/proj4.html" id="aboutRight">ABOUT</a></li> . Перепишите идентификатор в class, поскольку использовать идентификаторы для стилизации — плохая практика.

Во-вторых, вам не нужен 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>