CSS menu with search field - Chrome, FF and IE

Question

I wanted to create a nice, inherently simple menu in css. In chrome it looks ok but in ff it looks awful.

let's say i have nav layer (40px height, width 100%):

<nav id="navbar">
<div class="main-navigation">
 <ul> (list-style:none;)
 <li><a href="#">Home</a></li>
 <li><a href="#">Page1</a></li>
 <li><a href="#">Page2</a></li>
 <li><a href="#">Page3</a></li>
 <li><a href="#">Page4</a></li>
 </ul>
 <div class="search">
 <form method="get" action="">
 <input type="text" name="q" class="search-input" placeholder="Type here" />
 <input type="submit" class="search-btn" value="Search" />
 </form>
 </div>
</div>
</nav>

I would like to have all buttons with height 30px, font-size: 14px; and border-radius: 5px; and search input and submit button (input - height 30px; border-radius: 5px 0 0 5px; submit - height 30px; border-radius: 0 5px 5px 0;)

is there any way to position them to be displayed in one, equal line?

many thanks

• j08691: How about creating a jsFiddle to illustrate the problem you're having?
• Wojciechk: link in this example height is 36px, and height of search div is different in ff

Answer 1

Inline-block is your best alternative. It's a small adjustment in thinking, but well worth it. Re-fiddled

Answer 2

Try with this. this Is a really good article. its easy to rely on flex box to achieve a good design.

https://www.freecodecamp.org/news/you-just-need-to-know-these-properties-to-start-loving-css-a06aca6087e9

<style>
 nav {
 display: flex;
 justify-content: space-between;
 flex-direction: row;
 }
 nav a {
 display: inline-block;
 padding: 10px;
 }
 nav a:hover {
 color: red;
 cursor: pointer;
 }
 div.search {
 display: inline-block;
 color: red;
 }
 input.search-input {
 padding: 10px;
 }
 input.search-btn {
 padding: 10px !important;
 background-color: grey;
 border: 2px solid black;
 color: white;
 box-sizing:border-box;
 }
</style>
<nav id="navbar">
 <div>
 <a>Button 1</a>
 <a>Button 1</a>
 <a>Button 2</a>
 <a>Button 1</a>
 </div>
 <div class="search">
 <form method="get" action="">
 <input type="text" name="q" class="search-input" placeholder="Type here" />
 <input type="submit" class="search-btn" value="Search" />
 </form>
 </div>
 <div>
 <a>Sign up</a>
 </div>
</nav>