https://jsfiddle.net/jde24ab4/
HTML:
<div id="header"> <ul class="ul_header"> <li><a href="index.html">Один</a></li> <li><a href="index.html">Два</a></li> <li><a href="index.html">Три</a></li> <li><a href="index.html">Четыре</a></li> </ul> <ul class="ul_header_right"> <div style="float:right; margin-top: 15px; height:30px; border: 1px solid #0088cc; border-radius: 3px;"><li><a href="index.html">Регистрация</a></li></div> <div style="float:right;"><li><a href="index.html">Вход</a></li></div> </ul> </div>
CSS:
html, body{ width: 100%; height: 100%; margin: 0; padding: 0; font-family:'Open Sans', sans-serif; } a{ color: #0088cc; text-decoration: none; } a:visited { color: #0088cc; /* Цвет посещенных ссылок */ text-decoration: none; } a:hover { color: #0088cc; text-decoration: underline;; } h1 { margin: 0; padding: 40px; font-weight: 400; color: #4c5d6e; } #header{ background-color: #fff; position: fixed; width: 100%; font-size: 15px; font-weight: 400; height: 60px; line-height: 60px; border-bottom: solid 4px black; } .ul_header{ margin:0; padding-left: 300px; float: left; } .ul_header li{ display: inline; /* Отображать как строчный элемент */ padding: 0 15px; } .ul_header_right{ margin:0; float: right; } .ul_header_right li{ display: inline; /* Отображать как строчный элемент */ padding: 0 15px; }
It is necessary to align the elements Registration and Log on the right edge. Tried to use float: right parameters, but the problem is that the Registration text falls out of the div around it. Why is that? And the elements are not displayed in the same order as in the HTML code. Perhaps this is not the right way to align the elements on the right side? How to align them?