Reputation: 1
I'm trying to align some text in my div
which is acting as a nav bar.
I am trying to align the tags below to the very right hand side of my div
.
This is my HTML and CSS code containing the information of my div
, ul
and li
tags. I have already tried text-align: right;
but to no avail. If you need anything feel free to ask.
#navBar {
width: 100%;
height: 75;
background-color: silver;
position: fixed;
top: 0;
opacity: 0.9;
text-align: right;
display: inline-block
}
p {
width: 600px;
margin: 0 auto 20px;
font-family: 'Source Sans Pro', sans-serif;
}
ul {
width: 600px;
margin: 0 auto 20px;
font-family: 'Carter One', sans-serif;
list-style-type: none;
padding: 20px;
font-size: 20px;
text-align: right;
}
li {
display: inline;
padding-right: .6em;
}
<div id="navBar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
Here is a screenshot of the nav bar i have created. I am trying to put the links on the right hand side of the nav bar, is there any way i could do this?
Sorry if I don't use the correct terms but I am fairly new to web development and just need some guidance.
Upvotes: 0
Views: 46
Reputation: 1866
ul {
float: right;
}
And don't forget a clearfix
ul::after {
content: "";
display: block;
clear: both;
}
Demo : http://codepen.io/mbrillaud/pen/oXgeaX
Upvotes: 1