Placing an Image in the Right Corner Using jQuery Mobile

I am currently developing a mobile app and I need to align three images one below the other at the right corner next to some text. Any suggestions would be greatly appreciated. Thank you in advance. Below is my code snippet:

  <div>
 <ul data-role="listview" data-filter="true" data-input="#filterBasic-input" data-icon="false">
  <li class="custom">
   <h3>Week </h3>
   <p class="topic"><a href="#">Sun </a></p>
   <p><a href="#">Mon</a></p>
   <p><a href="#">Tue </a> </p>
    <p class="ui-li-aside"> <span><a href="#"> <img src="images/progressnew.png" alt="download">     </a></span> <span><a href="#"> <img src="images/progressnew.png" alt="download"> </a></span> <span><a   href="#"> <img src="images/progressnew.png" alt="download"> </a></span> </p>
   </li>
   </ul>
   </div>

  <styles>
  .ui-listview .ui-li-aside {
   position: absolute;
   top: 1em;
   right: 0.444em;
   margin:24px;
  text-align: right;
  }
  </styles>

Answer №1

If you want to make a change, simply include this code:

.ui-listview .ui-li-aside span{
       display: block;
}

This will instruct the SPANS containing the images to be displayed as block elements instead of inline elements.

SEE DEMO

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

The compatibility issues with the textarea and text-indent: placeholder feature on EDGE are causing functionality problems

I'm facing a peculiar problem with placeholders when using the Edge browser. In my current project, I need to implement a textarea with a specific text-indent property. However, on Edge, the placeholder text appears displaced more than expected. To h ...

Encountered an error searching for module 'autoprefixer' while executing the npx tailwindcss init -p command

I am currently working with Vue 3 and attempting to integrate tailwindcss by following this helpful tutorial: https://tailwindcss.com/docs/guides/vue-3-vite#install-tailwind-via-npm I have successfully installed the necessary dependencies using the comman ...

Some elements in the DOM appear to not be rendering even though they are present in the HTML source code

As a newcomer to web development, I have stumbled upon a perplexing issue. In my usage of d3.js (specifically the script found here), I have been attempting to incorporate additional features. I modified my JavaScript code to include a simple <p> ele ...

CSS Grid having trouble with wrapping elements

Greetings to all, As a newcomer to the world of web development, I am currently exploring the wonders of the CSS grid tool. However, I have encountered a roadblock: My intention is for the cards to automatically flow one by one into the next row while ma ...

Having trouble understanding the differences between Bootstrap 4's .list-inline class and .list-inline-item class?

I am currently utilizing Bootstrap 4 within Wordpress. Strangely, I am facing an issue where I am unable to have list items appear inline (horizontally) solely by using the class .list-inline on the list itself, as shown below: <ul id="dances" class="l ...

Aligning images with absolute CSS to text that is wrapping positions the images perfectly alongside the text content

My webpage has a long content section that resizes based on the browser width. Here's an example: <h1 id="loc1">Title</h1> <p>bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bod ...

How can you trigger a 'hashchange' event regardless of whether the hash is the same or different?

Having a challenge with my event listener setup: window.addEventListener('hashchange', () => setTimeout(() => this.handleHashChange(), 0)); Within the handleHashChange function, I implemented logic for scrolling to an on-page element whil ...

Is there a way to design a table that is responsive and automatically converts to a list when viewed on a mobile device

I am trying to design a responsive table showcasing artists' names. The goal is to have it look similar to this example: After finding and customizing code for the table, I encountered an issue when the table collapses on mobile view. The invisible e ...

Looping through items with ng-repeat and creating a submenu with M

When constructing a menu from a JSON file with submenus using the JQuery.mmenu plugin, I encountered an issue when trying to implement the submenu structure with ng-repeat. The raw HTML approach worked perfectly, but as soon as I introduced ng-repeat to dy ...

The mobile navigation bar may not display correctly on certain iPhones and iPads

Currently using a custom theme on Prestashop 1.6 where minor changes have been made to the CSS file, focusing mostly on colors and fonts. Interestingly, the mobile menu functions flawlessly on Android devices that were tested. However, some Apple devices s ...

Discover how to prevent a link or text from appearing if a user has already browsed a particular webpage

Is there a way to hide a link to another page if the user has previously visited that page? For example, I have 3 options - A, B, and C. If a user selects option A, links to pages B and C are displayed at the bottom of the page. However, if they then navi ...

Tips for utilizing innerHeight for a div during both window loading and resizing tasks?

I'm currently working on calculating the top/bottom padding of a div (.content) based on its height, and updating it upon loading and resizing the window. The goal is to have it centered nicely next to another div (.character) positioned beside it. I ...

Issue encountered when attempting to invoke a PHP function using Javascript through AJAX

I'm currently working on incorporating a PHP function into my HTML file using Ajax (which also contains JavaScript). My goal is to retrieve all locally stored JSON files. I've been following a guide at , but I'm facing some challenges. When ...

Connecting an HTML button to a Python script

I'm struggling to connect my HTML form with a Python script in order to send an email to the recipient. Despite researching various websites, I can't seem to successfully send the message that I've inputted into the text box. Here's my ...

What steps can I take to stop my browser from displaying the "waiting for MyHostName" message while performing an ajax Post/Get operation?

Whenever I access a website using Chrome, a message appears in the status bar saying "Waiting for MyHost name" along with an Ajax Loader circle in the browser tab. Here is a javascript function that I am working with: function listen_backend_client_reques ...

Position items at the center of the grid in material UI

I am having difficulty centering the grid items of material UI. I have tried using the justifyItems and alignItems props as mentioned in the documentation, but I'm still unable to achieve the desired result. Can anyone provide some guidance? Below is ...

Load Angular component on demand with necessary dependencies

Searching for an elegant solution (without resorting to private APIs) to create a widget-style dashboard. The goal is to dynamically load components based on user role. Is there a way to import a component and its dependencies included in the component&ap ...

Countdown to redirect or exit on Jquery mobile "pageshow" and "pagehide" events

Looking to implement a 30-second countdown on a Jquery Mobile page with specific requirements: (1) Countdown begins on pageshow (2) Redirects to new page when countdown expires (3) If user navigates away (pagehide) before countdown finishes, the timer fun ...

`Hovering over a div triggers a continuous animation loop`

I've gone through various questions and solutions related to this issue, but unfortunately, none of them seem to work for me. It's possible that I might be overlooking something or my scenario is slightly unique. The main problem I'm facing ...

Alert popup onclick feature is malfunctioning

SOLVED: I finally figured out the issue and it is now working perfectly. I had to manually switch to Chrome instead of using the Brackets live viewer. I want an alert box to pop up when the "Home" link is clicked on my website. I tried creating a separate ...