Fabio Viola Fabio Viola - 12 days ago 6
CSS Question

How to align my search box to the far right end

Hello everyone and happy week end.

I am trying to align on the same horizontal line, the links buttons on the left side and the search box on the right side.

The search box must go all way to the end of the right side.

Thank you so much in advance for your help.

This is what I have so far:

This is the menu:

<div class="navmenu"> <ul id=menu> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><form action='q.php' method='GET'> <input type='text' size='25' name='search'> <input type='submit' name='submit' value='Search' > </form></li> </ul> </div>


This is the css:

.navmenu { background-color: #FAFAFA;}
.navmenu ul {margin: 0; padding: 0;
list-style-type: none; list-style-image: none; }
.navmenu li {display: inline; }
.navmenu ul li a {text-decoration:none; margin: 4px;
padding: 5px 20px 5px 20px; color: #FFFFFF;
background: #5CB85C;}
.navmenu ul li a:hover {color: #FFFFFF;
background: #449D44; }

Answer

If you can use flexbox, that can be pretty easy.

jsFiddle

.navmenu ul {
  display: flex; /* defines flexbox */
}
.navmenu li:last-child {
  margin-left: auto; /* pushes the last <li> to the far right */
}