Challenge with shifting list items

The issue arises when applying margin to any element within the product or slider div, causing all list items to shift downwards.

.product-slider {
  margin-top: 16px;
  text-align: center;
}

.slide-item {
  list-style-type: none;
  display: inline;
  width: 80%;
  overflow: hidden;
  margin: auto;
}

.product, .slider {
  height: 200px;
  border: 1px solid black;
  display: inline-block;
}

.product {
  width: 25%;
}

.slider {
  width: 5%;
}
<ul class="product-slider">
  <li class="slide-item"><div class="slider"><i class="fas fa-angle-left"></i></div></li>
  <li class="slide-item"><div class="product">Test</div></li>
  <li class="slide-item"><div class="product">Test</div></li>
  <li class="slide-item"><div class="product">Test</div></li>
  <li class="slide-item"><div class="slider"><i class="fas fa-angle-right"></i></div></li>
</ul>

htmlcsshtml-lists

Answer №1

Here's another suggestion:

.product-carousel{
      margin-top: 16px;
      text-align: center;
    }

    .carousel-item{
      list-style-type: none;
      display: inline;
      width: 80%;
      overflow: hidden;
      margin: auto;
    }

    .item, .carousel{
      height: 200px;
      border: 1px solid black;
      display: inline-block;
      vertical-align:text-top;
    }

    .item{
      width: 25%;
    }

    .carousel{
      width: 5%;
    }

<ul class="product-carousel">
  <li class="carousel-item">
    <div class="carousel"><i class="fas fa-angle-left"></i></div>
  </li>
  <li class="carousel-item">
    <div class="item">Test</div>
  </li>
  <li class="carousel-item">
    <div class="item">Test</div>
  </li>
  <li class="carousel-item">
    <div class="item">Test</div>
  </li>
  <li class="carousel-item">
    <div class="carousel"><i class="fas fa-angle-right"></i></div>
  </li>
</ul>

Answer №2

Give this a shot:

.product-slider{
      margin-top: 16px;
      text-align: center;
    }
    
    .slide-item{
      list-style-type: none;
      display: inline;
      width: 80%;
      overflow: hidden;
      margin: auto;
    }
    
    .product, .slider{
      height: 200px;
      border: 1px solid black;
      display: inline-block;
    }
    
    .product{
      width: 25%;
    }
    
    .slider{
      width: 5%;
    }
<ul class="product-slider">
      <li class="slide-item slider"><div class="slider-left"><i class="fas fa-angle-left"></i></div></li>
      <li class="slide-item product"><div class="product-item">Example</div></li>
      <li class="slide-item product"><div class="product-item">Example</div></li>
      <li class="slide-item product"><div class="product-item">Example</div></li>
      <li class="slide-item slider"><div class="slider-right"><i class="fas fa-angle-right"></i></div></li>
    </ul>

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

Is there a way to set all offset sides in CSS simultaneously?

Is it possible to use the following syntax instead of setting each direction separately? sides:0px; ...

htmlcss

How to Retrieve the Following Element in a Table Using Javascript

https://jsfiddle.net/en6jh7pa/1/ I am encountering an issue with accessing the next element, as it is returning null. When I pass "this" as the onclick parameter, I expect to be able to grab the next element using this keyword. However, it seems to be re ...

javascripthtml

Where is the best location to store the image files?

I am currently working on a web application that focuses on Image processing, however I have encountered a basic issue. The images are not loading during the runtime of my HTML page. I have tried placing the image files in the src folder, but it seems li ...

htmleclipse

Sprite hover image in IE9 not aligned properly or blurry by 1 pixel

I have implemented a sprite to display my button image and a slightly darker hover image. Below is the CSS code I am using, with my image being 31px tall: a { background-position: 0 0; } a:hover { background-position: 0 -31px; } Although the ho ...

cssinternet-explorer-9spritecss-sprites

Troublesome alignment with bootstrap grid system

I require some assistance with the following: Specifically, I need help regarding the structure shown below: <div class="row"><div class="col-md-4"> <a class="individ" href="index.php?p=x" style="margin:5px 5px;"> ...

phphtmlcsstwitter-bootstrap

Is it feasible in Vue to import an scss file with deep selectors into the scoped styles of a component?

Is it possible to extract a Vue component's scoped SCSS with deep selectors into a separate file and then import it back in? For example: // Main.vue <template> <div id="main"> <h1>Title</h1> <span>Text< ...

cssvue.js

Setting the child elements of a CSS div to have the same width and be larger than the

Welcome everyone to my inaugural post! I hope I've followed the right steps. I'm encountering an issue where I have child divs that need to have equal widths. The #content can sometimes exceed the browser window's width (hence the 3000px), ...

htmlwidthcss

html2canvas is unable to capture images containing captcha

Below are the HTML codes: <div id="divPage"> div_Page <br/> <img id="captchaimglogin" src="https://www.emirates.com/account/english/login/login.aspx?cptLogin_captcha=86e2a65e-f170-43b6-9c87-41787ff64a35&t=88d296b19e5e8000&mode=ss ...

jqueryhtmlscreenshotcapturehtml2canvas

Troubleshooting problem with CSS hover effect on background images

Can anyone assist me with creating a simple mouse hover effect on these two images? I am having trouble getting it to work. I am looking for a fade transition to occur when the mouse is over the images. Thank you in advance! * { padding: 0; margin: ...

htmlcsstransitionmousehover

Attach data to a specific position within a jQuery DataTable

Hello everyone! I'm currently attempting to integrate tableInfo into a jquery DataTable, as shown below: However, when I modify the value in show-list, the information shifts down to the center of the column, as illustrated here: I have experimented ...

jquerycssdatatables

Unable to vertically align images in the carousel

Greetings! I am currently working on my website www.acigaiabeta.esy.es and I am facing an issue with aligning the images of the carousel to the center vertically. Despite trying various solutions, such as following tips from this resource, the images remai ...

htmlcss

Calculate the number of input boxes that have been filled

<input type="number" name="day1"> <input type="number" name="day2"> <input type="number" name="day3> Can anyone help me figure out how to count the number of filled fields in this form? For example, if only day1 is filled, the count resu ...

phphtml

Automatically updating div content using a static HTML page

Is there a way to refresh the content of an HTML div tag every 5 minutes without having to reload the entire page? <div id="pie"> <script src="index.js">// this script should be reloaded every 5 minutes </script& ...

javascripthtmlnode.js

I would like to include the value of the "file_id" variable in the href attribute of an appended HTML element, but it seems

<div id="invite_popup"> </div> $(".invite_button2").click(function(){ var file_id = $(this).data("id"); //alert(file_id); var popup2 ='< ...

javascriptphphtmlajaxlaravel

How to Choose a Radio Button from a Group using Selenium WebDriver and Java

My goal is to be able to choose a specific radio button from a set of radio buttons grouped by the name attribute: <div> <input type="radio" name="exampleInputRadio" id="optionRadio1" value="1"> <input type="radio" name="exampleInpu ...

javahtmlseleniumselenium-webdriverwebdriver

django displaying a blank screen

I'm having trouble with the code, forms.py from django.form import datetime, widgets import datetime import calendar from bootstrap_datepicker.widgets import Datepicker class DateForm(forms.Form): date_1=forms.DateTimeField(widget=DatePicker( ...

pythonhtmldjango

Room on the edges of a div that is positioned absolutely

I would like to create a space of 10px on each side of the #in div, similar to this layout: Check out the code here - live demo: html <div id="out"> <div id="in"></div> </div> css #out { width: 700px; height: 40px; back ...

htmlcsscss-position

Can the current website navigation be integrated into the blog script?

People might see me as a spoil sport for not using Wordpress, but I prefer a flatfile blog system for my small site. Currently, I am using the ozjournals-3.2 blog system. I need assistance in installing a header and site navigation on top of the blog page ...

cssheadernavigationblogs

Guide on how to gather values into a variable from the DOM using jQuery

Trying to make this function: The current issue I'm facing is that when changing a digit (by clicking on a hexagon), I want to save the selected number as the value of a hidden input field next to the digit in the DOM. Any ideas on how to achieve th ...

javascriptjqueryhtmlformsodometer

I'm looking to add a price ticker to my html webpage. Does anyone know how to do this?

PHP Code <?php $url = "https://www.bitstamp.net/api/ticker/"; $fgc = file_get_contents($url); $json = json_decode($fgc, true); $price = $json["last"]; $high = $json["high"]; $low = $json["low"]; $date = date("m-d-Y - h:i:sa"); $open = $json["open"]; ...

javascriptphpjqueryhtml