What is the best way to arrange list items in a horizontal line on

How do I display my li elements horizontally? I want each li element to contain an image with text overlay, but currently they are displaying vertically despite my attempts.

Below is the code snippet from my home.page.scss file:

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%;
}

And here's a snippet from the home.page.html file:

    <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>

I can't figure out what mistake I'm making. Any suggestions?

htmlcssangularionic-frameworksass

Answer №1

One option is to substitute

li {
  display: inline !important;
}

with

li {
  display: inline-block;
}

The distinction between the two can be found here. It's advisable to minimize the use of !important.

See a demonstration here: Stackblitz

Answer №2

Utilizing flexbox will enable you to accomplish this task.

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

li {
  flex: 1;
}

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

Answer №3

Your approach to styling the li list is on point by using

display: inline;

However, within each li item, you have inserted a div element which defaults to

display: block;

To rectify this, simply change the display property of the class "news" to either inline or inline-block. For a better understanding, refer to this working code example: https://jsfiddle.net/6w5ohxsL/1/

Answer №4

Give this a shot:

ul {
    use flexbox;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Top Tip for Preventing Angular Version Compatibility Issues

Here is an illustration that delves into my inquiry ----> Version Conflict The dilemma arises when my product has a dependency on a node package, which in turn relies on a specific version of Angular, denoted as version #y. However, my product itself ...

angularjsnode.jsangularnpmnpm-install

The data is not being displayed in the table

I am encountering an issue while attempting to populate the table with data received through props by looping over it. Unfortunately, the data is not rendering on the UI :( However, when I manually input data, it does show up. Below is my code: Code for P ...

htmltypescriptnext.jsreact-props

Having trouble getting Material Design Lite to function properly on my site

I'm having trouble with my HTML template that incorporates Google Material Design Lite. The header is working fine, but anything I add below it just moves to the top. Can someone take a look at the code and offer some assistance? .demo-layout-trans ...

htmlcssmaterial-designmaterial-design-lite

Sticky jQuery image not moving while scrolling

Upon visiting the mentioned website and scrolling down, you may notice that the logo image becomes stuck when transitioning between divs. This issue is likely due to my limited understanding of jQuery. The image is set as fixed using CSS and its fading eff ...

jquerycssfadescrolltop

What is the process for determining the overall cost of a column in Angular 9?

I am facing a challenge in calculating the total price, total quantity, and total counted(#) of each column in a table. | Item | Price | Quantity | 1 | Mouse | 500 | 1 | 2 | Wire | 100 | 2 | TI:3 | |TP:600 | TQ:3 | < ...

javascripthtmljqueryangular

Persist modified text to button when toggling Elements using localStorage in JavaScript

I'm working on creating a button for my web app that can toggle elements, and I want the text on the button to change based on the action it should perform! Here's the code: $(".hideLink").on("click", function(){ if($(this).text()=="Hide ...

javascriptjqueryhtml

Angular feature that shows only the selected value in a custom dropdown

Using a custom dropdown created with div, I encountered an issue when receiving an object response cards from the API. The problem arises when trying to iterate through the data using the custom dropdown - after selecting an item, the next clicked dropdown ...

javascriptangulartypescriptdropdown

Troubleshooting the issue of Bootstrap 4 scrollspy failing to update active navbar items

I have been working on a Bootstrap 4.0 landing page and trying to implement ScrollSpy without success. The active menu items are not changing as expected. Here is the code snippet from index.html: <body> <!-- Navbar --> <nav id="main-nav" ...

jqueryhtmltwitter-bootstrapbootstrap-4scrollspy

The outline feature cannot be applied to buttons within a btn-group in Bootstrap 4

I have successfully removed the outline for a single button, but I am struggling to remove it for a button within a btn-group class. Check out my JSFiddle DEMO This is the HTML code I am working with: <button class="btn btn-primary">Button without ...

cssbootstrap-4

Create a variable and set it equal to the value of a form

I'm having trouble setting a value to a hidden form field that needs to come from a query string parameter. The function that extracts the query string parameter is working properly, but the function that assigns this variable to the hidden form field ...

javascripthtmlforms

Exporting HTML to an image using Angular 5

Is there a method to export HTML as an image using Angular 5? Could you suggest a bookstore or similar resource for this task? Is it possible to achieve this using Angular 5? ...

angulartypescriptangular5

Obtain the result and retrieve it using `window.angularComponentRef.zone.run`

In my work, I have been able to successfully call angular functions within a component through a static file. For reference, you can visit this link: How to expose angular 2 methods publicly?. The method suggested in the link involves using Zones in Angul ...

angular

The button values fail to adhere to the specified input length in the Point of Sale application built with Angular

Having an issue with my Point of Sale app. When I enter values using the keyboard, it respects the maxLength limit, but when I enter values using the buttons, it does not respect the limit. Any ideas on how to solve this? <div mat-dialog-content> < ...

angular

Unable to organize the data associated with a specific column in the header within an Angular material Table

viewing clinical history data the output I'm receiving is not in ascending or descending order Trying to organize the data in the table, utilizing the MatTableModule module alongside other required modules. However, after conducting research, I have ...

angularmaterial-uiangular-materialangular-material-15angular-material-11

Tips for adding Google Tag Manager to a popup within a Chrome extension?

I have successfully developed a chrome extension. In the popup HTML, I added the Google Tag Manager script and a noscript iframe like this: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Signals< ...

angulargoogle-chrome-extensiongoogle-tag-manager

Having trouble getting Bootstrap Lumen to work with ASP.NET MVC5, JQuery Datatables, and CSS?

I'm struggling to apply the correct styling to my datatables. Here is a snapshot of how my datatables currently appear This snippet is from my BundleConfig.cs file: public static void RegisterBundles(BundleCollection bundles) { // Code f ...

cssajaxasp.net-mvctwitter-bootstrap-3datatables

My webpage is displaying the background image, but it is appearing behind all the other elements on the page

I've run into an issue where my background is showing up, but it's appearing behind my divs instead of alongside the content as I want. I can't seem to get it to work properly. I believe this part of my CSS code is causing the problem: body ...

htmlcssbackground

Arrange a group of users in the middle

Looking for some help with this specific code snippet .selection_user { display: block; background-color: #2D2C31; text-align: center; line-height: 75px; } <div class="select_user_menu"> <div class="selection_user">User1</div> ...

htmlcss

The issue with the datatable row button functionality is not functioning as expected within the

I am facing an issue with my Jade Template code where I am trying to trigger a JavaScript function when a button is clicked on each row. Despite following the documentation for DataTables and Jade, I am unable to figure out what mistake I am making. It see ...

javascripthtmlnode.jspug

Issue with form array patching causing value not to be set on material multiple select

When attempting to populate a mat-select with multiple options using an array of ids from Firestore, I encountered an issue. The approach involved looping through the array, creating a new form control for each id, and then adding it to the formArray using ...

javascriptangularangular-materialangular-reactive-forms