How to align the elements to the right?

Question

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?

Accepted Answer · 2016-08-25T10:34:59

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.
To add a stroke for li inside ul is not valid (not correct), it seems that the answer was accessible.
Here is an example without a list: jsfiddle.net/pyfpywps All the same, the registration somehow gets out of the div
(applies to all internal blocks) therefore the link inside the default block also has a line-height: 60px;
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;).

How to align the elements to the right?

1 answer 1

More articles: