im trying to put pictures "cabinet", "wishlist" and "cart" like on picture.enter image description here the text has to be under the picture and the pictures should be inline. however im stuck with a problem, my pictures are one under another.
here is my code:
* {
margin: 0;
padding: 0;
}
.header-top {
width: 100%;
height: 50px;
background-color: rgb(252, 238, 212);
background-image: url("../images/top-img.webp");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.header-search {
width: 84%;
height: 60px;
background-color: rgb(61, 44, 130);
/* display: inline-block; */
padding: 20px 8%;
}
.logo {
width: 100px;
height: 50px;
/* float: left; */
display: inline-block;
background-color: red;
}
.search {
width: 929px;
height: 50px;
/* margin: 0 auto; */
display: inline-block;
background-color: green;
}
.right-buttons {
width: 250px;
height: 50px;
/* float: right; */
display: inline-block;
background-color: yellow;
}
.logo>img {
width: 40px;
}
.right-buttons img {
width: 30px;
height: 30px;
margin-right: 30px;
}
.right-buttons span {
width: 30px;
height: 30px;
margin-right: 30px;
display: block;
}
.right-buttons div {
display: inline;
}
.search form input {
height: 30px;
width: 700px;
margin-right: 0;
padding-right: 0;
}
.search form button {
height: 30px;
width: 70px;
margin-left: 0;
padding-left: 0;
}<div class="header-top"></div>
<div class="header-search">
<div class="logo"><img src="./images/logo.webp"></div>
<div class="search">
<form>
<input type="text" placeholder="I look for..." id="search" name="search">
<button type="submit" value="Submit">Voice</button>
<button type="submit" value="Submit">Find</button>
</form>
</div>
<div class="right-buttons">
<div>
<img src="./images/user.png">
<span>Cabinet</span>
</div>
<div>
<img src="./images/wishlist.webp.png">
<span>Wishlist</span>
</div>
<div>
<img src="./images/cart.webp.png">
<span>Cart</span>
</div>
</div>
</div>enter image description here
i need pictures to be in line
>Solution :
You can change this line:
.right-buttons div {
display: inline;
}
In this line:
.right-buttons div {
display: inline-block;
}