How can i display li elements horizontally

Question

Pls how can i display my li elements in a horizontal direction, i want the li element to contain an image and a text that will display on the image, i tried everything but the li element is just displaying vertically

here is my home.page.scss page

ul {
    width: 100% !important;
    list-style-type: none !important;
    margin: auto !important; 
    overflow-x: auto !important;
    white-space: nowrap !important;
}
li{
    display: inline !important;
}
.deyDiv{
    position: relative;
    margin-top:5px;
    margin-bottom:5px;
    padding-right:2px; 
}
.text{
    position: absolute;
    bottom: 8px;
    left: 16px;
}
.iuyE{ 
    border-radius:10px;
}
.news{
    width:60%; 
    height:45%;
}

here's the home.page.html page

    <ul >
        <li *ngFor="let video of discovrys">
            <div class="deyDiv news">
                <img class="iuyE" [src]="image">
                <h6 class="text">The title of the nese</h6>
            </div>
        </li>
    </ul>

Pls what am i doing that's wrong

Can you create a demo where it reproduces your issue? Right now the code provides a blank output. — m4n0, Aug 20 '20 at 14:11
You want the text to be at the bottom of the image ? Or you want the `li` to be displayed horizontally instead of vertically ? — Emilien, Aug 20 '20 at 14:13
@Emilien i want the both the horizontal display of the images and the text to display at the bottom of the image — Eloike David, Aug 20 '20 at 14:19

score 2 · Accepted Answer · answered Aug 20 '20 at 14:21

2

You could replace

li {
  display: inline !important;
}

with

li {
  display: inline-block;
}

Difference b/n them here. Also try to use !important as sparingly as possible.

Working example: Stackblitz

answered Aug 20 '20 at 14:21

ruth

29,535
4
30
57

score 0 · Answer 2 · edited Aug 20 '20 at 19:47

0

try this:

ul {
    display: flex;
}

edited Aug 20 '20 at 19:47

shinjw

3,329
3
21
42

answered Aug 20 '20 at 14:17

Ehsan

766
10
17

it worked, but it made the images to be small, the height and width i gave it didn't work – Eloike David Aug 20 '20 at 14:29
Set width and height to img – Ehsan Aug 20 '20 at 17:35
Adding a short explanation as to what `display:flex` and `display:inline` does would greatly improve this answer. – shinjw Aug 20 '20 at 19:48

score 0 · Answer 3 · answered Aug 20 '20 at 14:20

0

You will be able to do it using flexbox.

ul {
  display: flex;
  flex-direction: row;
}

li {
  flex: 1;
}

.deyDiv {
  display: flex;
  flex-direction: column;
}

answered Aug 20 '20 at 14:20

Emilien

2,701
4
15
25

score 0 · Answer 4 · answered Aug 20 '20 at 14:20

Your approach to the li list is correct using

display: inline;

However inside of every li item you are using a div element which by default uses

display: block;

change the display from the class news to either inline or inline-block,
working code: https://jsfiddle.net/6w5ohxsL/1/

How can i display li elements horizontally

4 Answers4