Плавающие элементы на панели задач вправо влево, когда все они находятся в теге

#html #css

#HTML #css

Вопрос:

Моя панель навигации выглядит так: https://ibb.co/rs7Ndr5

Я хочу добавить еще одну ссылку на мою панель навигации «register», которая будет отображаться в крайнем правом углу. Единственное, я создал панель навигации, в которой есть

со всеми ссылками, и все в этом списке помещается в панель навигации с использованием css. Поэтому, если я добавлю новый элемент в список, он будет перемещен влево, как и все остальное в списке, потому что css помещает все в

добавьте тег в панель навигации.

Это мой css:

 <style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
font-family: Tahoma, Geneva, sans-serif;
background-color: #333;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
/* for buttons*/
.paging {
background-color: #333;
border: none;
color: white;
padding: 8px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
}
button:hover {
background-color: #111;
}
</style>

Это html:

 <ul>
<li class="all"><a href="/">All videos</a></li>
<li class="stam"><a href="/stam">Stam videos</a></li>
<li class="music"><a href="/music">Music videos</a></li>
<li class="news"><a href="/news">News videos</a></li>
<li class="news"><a href="/contact">Contact</a></li>
</ul>

Пожалуйста, помогите мне!
Большое спасибо!

Ответ №1:

Я думаю, я понимаю, чего вы хотите достичь. Вы можете добавить класс к новой кнопке «регистрация» и переместить его вправо. Вот так:

 ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
font-family: Tahoma, Geneva, sans-serif;
background-color: #333;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
/* for buttons*/
.paging {
background-color: #333;
border: none;
color: white;
padding: 8px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
}
button:hover {
background-color: #111;
}

.register {
  float: right;
}

 <ul>
<li class="all"><a href="/">All videos</a></li>
<li class="stam"><a href="/stam">Stam videos</a></li>
<li class="music"><a href="/music">Music videos</a></li>
<li class="news"><a href="/news">News videos</a></li>
<li class="news"><a href="/contact">Contact</a></li>
<li class="register"><a href="/contact">Register</a></li>
</ul>

Развернуть фрагмент