Html Question posted in
Some basic documentation can be found here.

Html – How do I put images inline?

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

Tags:

2

Answers


  1. 0

    You can change this line:

    .right-buttons div {
    display: inline;
}

    In this line:

    .right-buttons div {
    display: inline-block;
}
    Login or Signup to reply.
  2. 0

    parent div of images should be ‘inline’ or ‘inline-block’

        <div style="display:inline-block">
        <img src="./images/user.png">
        <span>Cabinet</span>
    </div>

    Also you can use a class for it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search