CSS horizontal scrolling for unaligned unordered lists

If you take a look at this code snippet, you will notice an issue with the layout http://jsfiddle.net/qo9czztj/

The problem arises when the title of an image is longer than one line, causing the image to shift and creating an uneven appearance within the containing div.

Despite experimenting with various positioning and display methods, achieving a flawless alignment has proven difficult.

Your assistance in resolving this matter would be greatly appreciated.

Best regards,

Matt

For reference, here is a sample of the code:

<div class="below">
  <ul>
    <li>
      <div>
        <img src="f8a9086b222786c5845f60fdc22c6c2e.jpg" />
        <p>hello hello hello hello hello hello hello hello hello</p>
      </div>
    </li>
    <li>
      <div>
        <img src="f8a9086b222786c5845f60fdc22c6c2e.jpg" />
        <p>hello hello</p>
      </div>
    </li>
  </ul>
</div>

Answer №1

modify the CSS rule

ul div {display: inline-block; text-align: center; }

so that it reads

ul li div {display: inline-block; text-align: center; vertical-align:top}

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

Modifying the Vue.js Vue3-slider component for custom color schemes

Currently, I am using the vue-slider component and would like to customize the color of the slider itself. The specific class that needs to be styled is "vue-slider-dot-tooltip-inner". Below is a screenshot displaying the original CSS styling for vue-slid ...

Tips for enabling custom elements in Firefox

I am struggling with getting a basic custom element example to work in Firefox. It functions properly in Chrome, but not in Firefox. Is there a way to make it work in Firefox, possibly using some sort of polyfill instead of Polymer? I have already tried e ...

Error: An error occurred due to an unexpected asterisk symbol. The import call only accepts one argument in Posenet

While attempting to utilize posenet on a python http server, I encountered a syntax error in the camera.js file at this specific line. import * as posenet from '@tensorflow-models/posenet'; This piece of code has been cloned from the following G ...

Show a clear box over an HTML table row upon mouseover, without highlighting the row

I'm looking to implement a transparent box, with a button, that surrounds a table row when the user hovers over it. I've searched on Google but all the pages only talk about how to highlight rows on hover. I am currently using JavaScript to add ...

Adaptive Style Sheets Strategy

The images below depict the concept I am trying to achieve. The first image shows a longer width while the second one represents a shorter width. The red blocks are positioned on the right and left sides, with the yellow block adjusting its width based on ...

When an external image is dragged over, include the class in the drop area of the file input

Hey, does anyone know how to use Jquery to add a class when an element is being dragged over a drop area? Here's the HTML code I'm working with: <div class="upload"> <form action=""> <input class="uploadfile" type="file" ...

The hovering over a table data element results in a superior transformation

I recently created a table with an interesting structure where the first <tr> contains two <td> elements (the first one having a rowspan), while the second <tr> only has one <td>. My goal is to have hovering over the <td> in t ...

The carousel's slides don't behave properly when swiping or using the slider controls (next/prev)

I have recently completed the construction of a carousel with swipe/touch functionality and control buttons for previous and next slides. However, I am facing an issue with the behavior of the carousel as it seems to be sliding by 2 or 3 instead of one at ...

I am currently encountering a glitch with my video VTT file, as the subtitles are not appearing on screen

welcome to the world of coding WEBVTT 00:01.000 --> 00:8.000 coding is my passion join me on this journey ...

What is the best method to change the value of a nearby TD text box?

I am currently developing a shopping cart application that requires me to update product screens based on users' previous orders stored as local JSON data. The product screen is built using JSON returned from the server. My goal now is to automatical ...

Executing conditions in a JavaScript browser

Currently, I am utilizing a JS library known as fallback.js. This library loads all its <link> elements at the bottom of the <head> tag. However, I am facing an issue where I need to load certain stylesheets at the very end, but they require IE ...

The header of my website requires adjustment to correct the horizontal line at the top

I am having an issue with a horizontal line separating my header from the body content. I want it to stay in place when scrolling, but when I try to set it to a 'fixed' position, it behaves strangely. Can someone please assist me with this proble ...

What is the best way to receive detailed error messages from the LESS compiler when using it in Symfony 2?

I have successfully implemented dynamic compilation of LESS scripts to CSS in Symfony 2 by following this guide: However, I am facing an issue where if there is an error in a LESS script, the compilation fails and no CSS is generated for the browser. Is t ...

Exploring the differences between pseudo-elements when styled as display:block versus display:inline

I'm currently honing my CSS skills by following a Youtube tutorial from freecodecamp.org Here's the code I've been working on: p::before{ content: "hello "; color: white; font-size: 60px; background: salmon; margin-bottom: 20px ...

Vertical Image Alignment in Bootstrap 3

Looking for some help with a basic HTML structure here. I have a single row divided into two columns, each containing an image of the same size. What I need is to center one image both horizontally and vertically in each column. <div class="containe ...

A distinctive noise is heard when hovering over multiple instances of a div

I'm trying to implement a feature where a unique sound plays when hovering over a specific div element with a particular class (.trigger). However, I am encountering an issue where multiple instances of this div class result in the same sound being pl ...

Enhancing Text Clarity on iOS Devices

I've created a webapp that works smoothly on the majority of mobile devices. However, I've noticed that occasionally on my iPhone 5s (and I've heard similar experiences from users on other iOS devices), the text appears blurry. This issue se ...

I am experiencing difficulty loading my image in HTML5

Despite using the correct syntax and having my image file in the same folder as my HTML document, I am facing an issue where the programmed image does not appear on the page when I load the document. What could be causing this? In this case, both my HTML ...

Mobile phone experiencing issues with background loop video playback

<video autoplay muted loop id="videobg"> <source src="bgvideo/bgvideo.mp4" type="video/mp4"> </video> I have a background video on my website that works perfectly on desktop but not on iPhone. You can c ...

Is there a way to change the color of a checkbox (both the box and font) in the disabled state using material ui

When using Material UI v4.9.12, it is possible to create a customized checkbox with a specific color that remains fixed: const GreenCheckbox = withStyles({ root: { color: green[400], '&$checked': { color: green[600], }, ...