How to align logo and menu items in one line? - html

Question

I cant see my alignment in one line. logo, menu and right menu... Please help to achieve the final output.
body {
background-color: #ffffff;
}
#wrapper {
width: 1200px;
margin-left: auto;
margin-right: auto;
/* background-color: #CDCDCD; */
}
.top-menu {
margin-top: 40px;
/* background-color: #95E659; */
}
header {
/* width: 100%; */
}
.logo {
width: 40px;
height: 40px;
}
.menu {
float: left;
}
.menu ul li {
display: inline;
list-style: none;
}
.menu ul li a {
margin-right: 55px;
text-decoration: none;
color: #303030;
font: 14px lato;
}
.menu ul li:first-child {}
.menu ul li:nth-child(6) {
margin-right: 300px;
}
.search-container {
float: right;
}
<div id="wrapper">
<header>
<div class="top-menu clearfix">
<div class="menu">
<div class="logo">
<a href=""><img src="assets/images/logo.jpg" alt="">
</div>
<ul>
<li>Women</li>
<li>Men</li>
<li>Kids</li>
<li>Coming Soon</li>
<li>About</li>
<li>
<img src="assets/images/user.png" alt=""> Login
</li>
<li>
<img src="assets/images/bucket.png" alt=""> Basket
</li>
</ul>
<div class="search-container">
<form action="/action_page.php">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
</div>
</div>
</header>
<hr>
</div>

Answer 1

Use flex box for inline block elements. This will also give you a lot more control over the children elements and their layout.
I altered your HTML a little, adding the center menu buttons in a parent div and separating unordered list into two unordered lists. This way we can use flex to justify their content with space-between placing them on separate ends of the parent elements block.
On the menu display: flex, we also add a flex value for each child element, the logo, the menu buttons parent div between and the login button. By placing these elements into their own parent divs, we can control the width using flex. To center the elements vertically, if our default axis for display flex is set to row, we can use the align-items property. This will align the items in that parent elements border vertically. align-items: center
The logo and login buttons parents both having a flex value of 0, which means they will take up only the space they need to show their content. The middle element, .between having a flex of 1 will mean it will take up the rest of the parent menus width. This will allow us to place a flex display on the UL elements and we can then set them on separate sides of the remaining sections width using justify-content on the UL elements parent element .between.
Snippit best if viewed in full page view as you define the width of your wrapper to 1200px.
body {
background-color: #ffffff;
margin: 0 auto;
}
#wrapper {
width: 1200px;
margin: 0 auto;
background-color: #CDCDCD;
}
.top-menu {
margin-top: 40px;
background-color: #95E659;
}
.logo {
flex: 0;
}
.logo img {
width: 40px;
height: 40px;
}
.search-container {
flex: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.menu {
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 2rem;
}
.between {
display: flex;
justify-content: space-between;
flex: 1;
}
.menu div ul.left {
display: flex;
justify-content: flex-start;
}
.menu div ul.right {
display: flex;
justify-content: flex-end;
}
.menu ul li {
flex: auto;
display: inline;
list-style: none;
padding: 0 1rem;
}
.menu ul li a {
text-decoration: none;
color: #303030;
font: 14px lato;
}
<header>
<div id="wrapper">
<div class="top-menu clearfix">
<div class="menu">
<div class="logo">
<a href="">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt="">
</a>
</div>
<div class="between">
<ul class="left">
<li>Women</li>
<li>Men</li>
<li>Kids</li>
<li>Coming Soon</li>
<li>About</li>
</ul>
<ul class="right">
<li>
<img src="assets/images/user.png" alt="">Login
</li>
<li>
<img src="assets/images/bucket.png" alt="">Basket
</li>
</ul>
</div>
<div class="search-container">
<form action="/action_page.php">
<button type="submit"><i class="fa fa-search">search</i></button>
</form>
</div>
</div>
</div>
</div>
</header>

Answer 2

Here's a start with flexbox.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
body {
background-color: #ffffff;
}
#wrapper {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.top-menu {
margin-top: 40px;
display: flex;
align-items: center;
justify-content: space-between;
}
.menu {
display: flex;
align-items: center;
}
.logo {
width: 40px;
height: 40px;
}
.menu ul li {
display: inline;
list-style: none;
}
.menu ul li a {
text-decoration: none;
color: #303030;
font: 14px lato;
}
<div id="wrapper">
<header>
<div class="top-menu clearfix">
<div class="menu">
<div class="logo">
<img src="https://via.placeholder.com/50" alt="">
</div>
<ul>
<li>Women</li>
<li>Men</li>
<li>Kids</li>
<li>Coming Soon</li>
<li>About</li>
</ul>
</div>
<div class="menu">
<ul>
<li>
<img src="https://via.placeholder.com/10" alt=""> Login
</li>
<li>
<img src="https://via.placeholder.com/10" alt=""> Basket
</li>
</ul>
<div class="search-container">
<form action="/action_page.php">
<button type="submit"><i class="fa fa-search">s</i></button>
</form>
</div>
</div>
</div>
</header>