Currently, I am in the process of setting up a small navigation bar that includes a search bar and a login feature. However, I have hit a roadblock as my usual method of using display:flex is not working for this particular case.
Instead, I attempted to apply the property display:inline to my <li> elements, but unfortunately, it did not yield the desired results.
CSS:
* {
margin:0;
box-sizing:border-box;
}
html {
display:block;
}
body {
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
line-height: 1.42857143;
}
a {
color: #00B7FF;
}
.navbar-default {
position:relative;
min-height: 50px;
background-color: #f8f8f8;
border-color: #e7e7e7;
}
.container-fluid {
padding-right:30px;
padding-left:30px;
margin-left:auto;
margin-right:auto;
}
.navbar-default ul {
list-style: none;
display:inline;
}
.navbar-default li {
display:inline;
}
HTML:
<nav class="navbar-default">
<div class="container-fluid">
<ul class="navbar-default nav">
<li>
<div id="search" class="search-navbar">
<input type="search">
<input type="button" value="Search">
</div>
</li>
<li>
<div id="login" class="login-navbar">
<input type="text">
<input type="password">
<input type="button" value="Sign in">
</div>
</li>
</ul>
</div>
</nav>
I have created a demonstration on JSFiddle: https://jsfiddle.net/rvfd5h5e/
My goal is to position the search bar slightly left of center and the login feature towards the right side. If anyone can provide assistance with achieving this layout, it would be greatly appreciated.