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?

    1 answer 1

    You do not have a valid html code.

    Not correct: ul>div>li

    Correct: ul>li

    For #header set line-height: 60px; the property applies to all internal blocks, so that the sign "Registration" does not get out - you should set li (or another wrapper) line-height: 30px; (since height: 30px; )

     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; } .wrap-li { line-height: 30px; margin-top: 15px; height: 30px; border: 1px solid #0088cc; border-radius: 3px; 
     <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"> <li class="wrap-li"><a href="index.html">Регистрация</a></li> <li><a href="index.html">Вход</a></li> </ul> </div> 

    Everything is aligned.

    • In your example, there is no diva around Registration and the text is generally omitted. This is not a solution, delete div stroke) I need it. - GuitarFan
    • To add a stroke for li inside ul is not valid (not correct), it seems that the answer was accessible. - HamSter
    • I understood that, there is no deal in li and ul. Here is an example without a list: jsfiddle.net/pyfpywps All the same, the registration somehow gets out of the div - GuitarFan
    • And in this case you have #header given line-height: 60px; (applies to all internal blocks) therefore the link inside the default block also has a line-height: 60px; and does not fit in a block with a fixed width of 30px; Additionally set the div (with the link inside) - line-height: 30px; And the alignment, in order to go in order (registration, and then the entrance), must also be wrapped in a wrapper (float: right) and already aligned within it (registration - float: left; input - float: right;). - HamSter
    • Low bow to you) - GuitarFan