Right align menu items without reversing them using CSS - html

Question

How do I get all my menu items (apart from home) to sit on the right hand side without their order being reversed (i.e keep Features as the first item).
Please see my code below:
* { box-sizing: border-box; }
body { font-family:Verdana, Geneva, sans-serif; font-size:10pt; color:#828282; }
.header {padding: 10px;}
.header ul {list-style: none;}
.header ul li {display: inline}
<div class="header">
<ul>
<li>Home
<li>Features
<li>Pricing
<li>Sign up
<li>Login
</ul>
</div>
<div class="shout">
Start
</div>

Answer 1

If you want to move entire menu on right side, you can use float: right for your ul element. In your case it would be:
.header ul {float: right;}
Working fiddle example: https://jsfiddle.net/vpygzyyx/1/
EDIT: Here is an update with HOME on left side and rest of the menu on right side of header:
.header ul {list-style: none; text-align:right;}
.header ul li {display: inline}
.header ul li:first-child{float:left}
Fiddle demo link: https://jsfiddle.net/vpygzyyx/2/

Answer 2

Use direction: rtl; and float: left; on li:first-child. See the snippet
* {
box-sizing: border-box;
}
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 10pt;
color: #828282;
}
.header {
padding: 10px;
}
.header ul {
list-style: none;
}
.header ul li {
display: inline
}
ul {
direction: rtl;
}
li:first-child {
float: left
}
<div class="header">
<ul>
<li>Home
</li>
<li>Features
</li>
<li>Pricing
</li>
<li>Sign up
</li>
<li>Login
</li>
</ul>
</div>
<div class="shout">
Start
</div>

Answer 3

You have to make two menu for that, and you can achieve your output, try following code :-
<div class="header">
<ul>
<li>Home</li>
</ul>
<ul class="right-menu">
<li>Features</li>
<li>Pricing</li>
<li>Sign up</li>
<li>Login</li>
</ul>
</div>
Css will be :-
.header .right-menu{
float: right;
}
It may help you.

Answer 4

Split your ul into a .left-menu for Home and a .right-menu for the other items then add float:left to the left-menu and float:right to right-menu, finally add the clearfix to the header to force your other elements down below the menu:
* { box-sizing: border-box; }
body { font-family:Verdana, Geneva, sans-serif; ; color:#828282; }
.header {padding: 10px;}
.: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.header ul {list-style: none;}
.header ul.left-menu {float: left;}
.header ul.right-menu {float: right;}
.header ul li {display: inline}
<div class="header">
<ul class="left-menu">
<li>Home</li>
</ul>
<ul class="right-menu">
<li>Features</li>
<li>Pricing</li>
<li>Sign up</li>
<li>Login</li>
</ul>
</div>
<div class="shout">
Start
</div>

Answer 5

As in this JS Fiddle, give the .header right text-align and then float:left the first child of the list - you forgot to close the li tags
* {
box-sizing: border-box;
}
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 10pt;
color: #828282;
}
.header {
padding: 10px;
text-align: right;
}
.header ul {
list-style: none;
}
.header ul li {
display: inline
}
.header ul li:first-child {
float: left
}
<div class="header">
<ul>
<li>Home</li>
<li>Features</li>
<li>Pricing</li>
<li>Sign up</li>
<li>Login</li>
</ul>
</div>
<div class="shout">
Start
</div>