CODEWITHSUNDEEP
htmlcss
jordan22699
jordan22699

Reputation: 1

Trying to align text in a div, HTML& CSS

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

Answers (2)

Mehdi Brillaud
Mehdi Brillaud

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

G.L.P
G.L.P

Reputation: 7217

Try like this: Demo

ul {         
     float:right;
 }

Upvotes: 2

Related Questions