Html li element display one on top of the other

HTML-CSS
1

Hi guys,

I have problem with li list being displayed one on top of the other. This is how my code looks like if you need more info please let me know. The li element should display one after the other.
HTML

<ul class="user-nav__addWatch">

                        <li class="nav-addWatch">
                            <div class="addWatch-img">
                                <img src="img/nat-1.jpg" class="movie-img" alt="rambo">
                            </div>
                            <div class="addWatch-name">
                                <h3>Rambo</h3>
                            </div>

                        </li>

                        <li class="nav-addWatch">
                            <div class="addWatch-img">
                                <img src="img/nat-2.jpg" class="movie-img" alt="rambo">
                            </div>
                            <div class="addWatch-name">
                                <h3>Rambo</h3>
                            </div>

                        </li>

                    </ul>

CSS

.user-nav__addWatch {
                    list-style: none;
                    position: absolute;
                    top: 27rem;
                    right: -3rem;
                    transform: translate(-72%, -40%);
                    width: 25rem;
                    height: 50rem;
                    background-color: royalblue;
                    margin-top: 2rem;
                    visibility: hidden;
                    box-shadow: 0 1.5rem 4rem rgba($color-grey-dark-1, .4);
                }
                
                .nav-addWatch {
                    display: flex;
                    align-items: center;
                    position: absolute;
                    width: 100%;
                    height: 13rem;
                    padding: 1.5rem 2rem;
                    &:hover {
                        background-color: red;
                    }
                }
                
                .movie-img {
                    height: 10rem;
                    margin-right: 2.5rem;
                }
                
                .addWatch-name {
                    color: $color-grey-dark-1;
                    font-size: 1.5rem;
                    font-weight: 700;
                    letter-spacing: .1rem;
                }
1 Like
2

By default li displays as a block (1 on top of the other). You will want to force the li to be inline or inline-block.

1 Like
3

I want the lid elements to be displayed one after the other not side by side.

1 Like
4

you are putting them all in the same place with this

1 Like
5

I will remove this and will update you if this solve the problem.

6

I removed position: absolute; but it caused .user-nav__addWatch to go wider and expand.

7

Use margin or padding to correct the width between the text.

8

I solved the problem I had to set the flex-direction: row on this container.

10

But now I have problem with ul jumping up when new element is added to it.

11

Please give your updated HTML and CSS code

12

This is the updated version of my code.

.user-nav__addWatch {
                    list-style: none;
                    position: absolute;
                    top: 22.5rem;
                    right: -2.9rem;
                    transform: translate(-72%, -40%);
                    width: 25rem;
                    max-height: 70rem;
                    background-color: $color-grey-light-2;
                    margin-top: 2rem;
                    visibility: hidden;
                    box-shadow: 0 1.5rem 4rem rgba($color-grey-dark-1, .4);
                    overflow-y: auto;
                }
                
                .nav-addWatch {
                    display: flex;
                    align-items: center;
                    flex-direction: row;
                    width: 100%;
                    height: 13rem;
                    padding: 1.5rem 2rem;
                    &:hover {
                        background-color: $color-grey-light-4;
                    }
                }
13

Do you have a link to your project?

14

I can’t post the whole code because it’s long.

15

paste it in the codepen

17

I have tried to re-produce an example. If you were try to add more li elements to UL it jumps up or if deleted any li element from existing list it jumps down. link to codepen. https://codepen.io/javas_ninja/pen/jOroZvZ

18