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;
}
Нужно выровнять элементы Регистрация и Вход по правому краю. Пробовал использовать параметры float:right, но проблема в том, что текст Регистрация выпадает из div вокруг него. Почему так? И еще элементы выводятся не в том порядке, как в HTML коде. Возможно это не правильный способ выровнять элементы по правой стороне? Как правильно их выровнять?