The following provides for a fluid horizontal navigation with a search box. The navigation is styled using a FlexBox to keep all elements, regardless of type, properly aligned. The search TextBox has a search Button attached to the end to allow for the user to click a button to search. The search button uses Google Icon's search image.

HTML
HTML Code:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- located in the <head> and is for the <span class="material-icons">search</span> -->

<nav>
  <a href="#" id="currentPage">Page1</a>
  <a href="#">Page2</a>
  <a href="#">Page3</a>
  <a href="#">Page4</a>
  <div>
    <input id="txtQuickSearch" placeholder="Quick Search" type="text" />
    <button><span class="material-icons">search</span></button>
  </div>
</nav>
CSS
Code:
nav {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

nav * {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.25em;
}

nav a {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;

  background-color: #738FBF;
  border: 1px solid #000;
  color: #fff;
  padding: .25em 1em;
  text-decoration: none;
}

nav a#currentPage {
  color: #000;
}

nav a:not(#currentPage):hover {
  color: #022259;
  text-decoration: underline;
}

nav div {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 0 1 100%;
  -ms-flex: 0 1 100%;
  flex: 0 1 100%;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
  
  display: flex;
}

nav div input {
  color: #666;
  flex: 1;
  padding-left: 1em;
}

nav div button {
  cursor: pointer;
  color: white;
  border: solid 1px #0078a5;
  background-color: #738FBF;
  
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #738FBF),
    color-stop(1, #A9C1E8)
  );
  background-image: -o-linear-gradient(bottom, #738FBF 0%, #A9C1E8 100%);
  background-image: -moz-linear-gradient(bottom, #738FBF 0%, #A9C1E8 100%);
  background-image: -webkit-linear-gradient(bottom, #738FBF 0%, #A9C1E8 100%);
  background-image: -ms-linear-gradient(bottom, #738FBF 0%, #A9C1E8 100%);
  background-image: linear-gradient(to bottom, #738FBF 0%, #A9C1E8 100%);
}

nav div button:hover {
  background-color: #0078a5;
  background-image: none;
}

nav div button:hover > span {
  font-weight: bold;
}
Fiddle: https://jsfiddle.net/6o3r9e0L/