CODEWITHSUNDEEP
htmlcss
Chi Shen
Chi Shen

Reputation: 207

nav bar and search box inline

how can I create horizontal navbar and search box together in one line in the center of the page? I use text-align center to put the nav bar at the center of the page, but when I use float to make the search box place beside nav , the whole nav float to left.

body {
  background-color: #C0C0C0;
  margin: 0px;
}
.nav {
  text-align: center;
  list-style: none;
}
.nav li {
  display: inline;
  float: left;
}
<div id="title">
  <p>
    <h1>Welcome to KDU MUSIC CENTER</h1>
  </p>
</div>

<div>
  <ul class="nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="findoutmore.php">Find out more</a></li>
    <li><a href="offer.html">Offer</a></li>
    <li><a href="credit.html">Credit</a></li>
    <li><a href="#">Admin</a></li>
    <li><a href="wireframe.html">WireFrame</a></li>
  </ul>

  <form class="formright">
    <input type="text" placeholder="Search">
    <button type="submit">Search</button>
  </form>
  some text
</div>

Upvotes: 2

Views: 1865

Answers (2)

Heinrich Henning
Heinrich Henning

Reputation: 933

This should work for you, note the use of inline-block for the display property of your list item and your form. Also placed the text-align center on your outer div. Will now render the nav items with search in the center of the screen.

Also removed the inherit padding on the left side of an unordered list (ul) which made it look slightly off-center.

Edit: To answer OP's comment. I changed the .formright to float right, made the container div#navbar 100% width and the ul.nav margins to 0

body {
  background-color: #C0C0C0;
  margin: 0px;
}
.nav {
  list-style: none;
}

.nav li {
  display: inline-block;
}

.nav {
  display: inline-block;
  padding-left: 0px;
  margin: 0px;
}

.formright {
   display:inline-block;
   float:right;
}

#navbar {
  text-align: center;
  width: 100%;
}
<div id="title">
  <p>
    <h1>Welcome to KDU MUSIC CENTER</h1>
  </p>
</div>

<div id="navbar">
  <ul class="nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="findoutmore.php">Find out more</a></li>
    <li><a href="offer.html">Offer</a></li>
    <li><a href="credit.html">Credit</a></li>
    <li><a href="#">Admin</a></li>
    <li><a href="wireframe.html">WireFrame</a></li>
  </ul>

  <form class="formright">
    <input type="text" placeholder="Search">
    <button type="submit">Search</button>
  </form>
</div>
<div>
  some text
</div>

Upvotes: 3

Andrew Bone
Andrew Bone

Reputation: 7291

It really depends on what sort of look you're going for. I'd suggest looking into flexbox I've made a traditional looking navbar using it

body {
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  background-color: #CCC;
  margin: 0px;
}
nav {
  list-style: none;
  background: tomato;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: flex;
  align-items: center;
  
}
nav a {
  text-decoration: none;
  display: block;
  padding: 10px 1em;
  color: white;
}
nav a:hover {
  background: rgba(0,0,0,0.1);
}
nav .spacer {
  flex-grow: 1;
}
nav .formright {
  padding: 10px;
}
@media (max-width: 800px) {
  nav .formright {
    display: none;
  }
}
<div id="title">
  <h1>Welcome to KDU MUSIC CENTER</h1>
</div>

<nav>  
  <li><a href="index.html">Home</a></li>
  <li><a href="findoutmore.php">Find out more</a></li>
  <li><a href="offer.html">Offer</a></li>
  <li><a href="credit.html">Credit</a></li>
  <li><a href="#">Admin</a></li>
  <li><a href="wireframe.html">WireFrame</a></li>

  <div class="spacer"></div>

  <form class="formright">
    <input type="text" placeholder="Search">
    <button type="submit">Search</button>
  </form>
</nav>

<p>Some text</p>

You may need to open full screen to see the search bar.

Upvotes: 0

Related Questions