HTML / CSS navigation bar

Question

I am trying to move the register button on my nav bar to the left, while having the rest on the left, could somebody help?

my code;


     <html>
   <head>
    <style>

    ul {
  list-style-type: none;
  margin: 5px;
  padding: 10px;
  overflow: hidden;
  background-color:#005EB8;
}

li {
 float: right;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #003087;
}
</style>
<body>
    <ul>
    <li><a href="doctors.html">DOCTOR LOGIN</a></li>    
    <li><a href="login.html">MHS LOGIN</a></li>
    <li><a href="admin.html">ADMIN LOGIN</a></li>
    <li><a href="ourdoctors.html">OUR DOCTORS</a></li>
    <li><a href="story.html">OUR STORY</a></li>
    <li><a href="findus.html">FIND US</a></li>
    <li><a href="register.html">REGISTER</a></li>
    </ul>
 </div>

sorry if my code is really bad

i would like to keep doctors, login admin our doctors, story findus on the right hand side, but have register isolated on the left hand side of the nav bar (if possible?) — Burc Sahin
– Burc Sahin, Commented Nov 16, 2019 at 18:55

Ali Kleit · Accepted Answer · 2019-11-16 18:56:56Z

1

Add the following:

 ul li:last-child {
            float: left;
  }

answered Nov 16, 2019 at 18:56

Ali Kleit

3,7793 gold badges28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

maio290 · Accepted Answer · 2019-11-16 18:57:42Z

1

Use the float attribute:

   <body>
    <ul>
    <li style="float:left"><a href="register.html">REGISTER</a></li>
    <li><a href="doctors.html">DOCTOR LOGIN</a></li>    
    <li><a href="login.html">MHS LOGIN</a></li>
    <li><a href="admin.html">ADMIN LOGIN</a></li>
    <li><a href="ourdoctors.html">OUR DOCTORS</a></li>
    <li><a href="story.html">OUR STORY</a></li>
    <li><a href="findus.html">FIND US</a></li>
    </ul>
 </div>

edited Nov 16, 2019 at 18:57

answered Nov 16, 2019 at 18:55

maio290

6,8081 gold badge27 silver badges41 bronze badges

1 Comment

Burc Sahin Over a year ago

i want to isolate register to the left hand side of the nav bar, whilst having the rest on the right hand side

Collectives™ on Stack Overflow

HTML / CSS navigation bar

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related