CODEWITHSUNDEEP
css
user4164128
user4164128

Reputation:

Place <ul> element to the right (fluid nav)

Iam trying to create a ul element which sticks to the right side of its parent div element. The ul should be fluid, see what I've got so far below. Ul stays on the left, want it to start on the right, so that the li with the contact is fixed to the right corner.

jsfiddle here

Html:

<div>
    <ul>
        <li>home</li>
        <li>portfolio</li>
        <li>blog</li>
        <li>news</li>
        <li>contact</li>
    </ul>
</div>

Css:

div {
    width: 100%;
    border: 1px solid black;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 100%;
}

ul li {
    display: inline;
    padding: 0 0 0 5%;
}

ul li:after {
    content: "|";
    padding: 0 0 0 5%;
}

ul li:last-child:after {
    content: "";
    padding: 0;
}

Upvotes: 0

Views: 541

Answers (1)

Sebastien B.
Sebastien B.

Reputation: 476

Know that i understant the problem you just need to add a text-align:right to the ul element.

ul {
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
text-align:right;
}

Upvotes: 1

Related Questions