Expanding lists across multiple lines

I've been struggling with the following code and can't seem to figure out how to make the text break and display below the image similar to a table.

<ul style="display:block inline; list-style:none;">
<li style="display:inline"><img src="BoxCover-01.jpg" /><br />Title 01</li>
<li style="display:inline"><img src="BoxCover-02.jpg" /><br />Title 02</li>
<li style="display:inline"><img src="BoxCover-03.jpg" /><br />Title 03</li>
<li style="display:inline"><img src="BoxCover-04.jpg" /><br />Title 04</li>
<li style="display:inline"><img src="BoxCover-05.jpg" /><br />Title 05</li>
</ul>

Ideally, I want to hide the bullets and have them display inline. The list items should gracefully cascade beneath each other based on the content width as well.

This code will be inserted into a blog post to showcase a collection of nominated films and DVDs.

Any assistance you can provide would be greatly appreciated. Thank you!

htmlcsslist

Answer №1

Take a look at this Fiddle for the solution to your display property issues. I have also improved your markup for better efficiency.

Here is the modified HTML:

<ul >
<li ><img src="BoxCover-01.jpg" />Title 01</li>
<li ><img src="BoxCover-02.jpg" />Title 02</li>
<li ><img src="BoxCover-03.jpg" />Title 03</li>
<li ><img src="BoxCover-04.jpg" />Title 04</li>
<li ><img src="BoxCover-05.jpg" />Title 05</li>
</ul>

And the updated CSS:

ul{
    list-style:none;
    padding:0;
    margin:0;
}
li{
    display:inline-block;
}
img{
    display:block;
}

Answer №2

Here are a couple of solutions:

Solution 1

The image should be set as display:block. This will shift the text to a new line and eliminate the need for using <br>

Example:

http://jsfiddle.net/Gzd8m/1/

Solution 2

An additional <span> element needs to be added in the markup with display:block property. This will also move your text to a new line without needing <br>

Example:

http://jsfiddle.net/Gzd8m/2/

Answer №3

Avoid using </br> in this scenario, and be sure to make the following correction:

display:inline-block;

rather than

display:block inline;

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

Manipulating CSS styles using Jquery only applies to elements with specific id attributes, and not to elements with class attributes

Having some difficulty figuring out a solution to this issue. Attempting to modify certain CSS properties using jQuery. The problem arises when one div has an ID, changing the property there works as expected. However, the other div only possesses a class ...

javascriptjqueryhtmlcss

Updating image source attributes for all images with HTML Agility

I'm facing an issue where I need to change all src attributes in the HTML code to absolute paths instead of relative paths. I attempted to solve this problem using HTML Agility: string html = "<body><div><img src=\"/folder/a.png&b ...

c#htmlhtml-agility-pack

Displaying a check icon on a chosen card using React.js

Is there a way to display a check icon on the selected card similar to this example https://i.sstatic.net/Usuj6.png If you have any ideas or suggestions, please help. Thank you in advance! ...

javascriptcssreactjs

Is it possible to create an array that organizes monthly income data from a JSON file?

I'm currently developing an Accounting System where I need to display a bar chart showing the monthly Incomes and Expenses. The data is retrieved from a database using AJAX, and it returns the following JSON: { "results":{ "his ...

javascripthtmlarraysjsonjavascript-objects

Utilizing arrow keys as a means of setting focus (HTML & JavaScript)

Is it possible to program the left arrow key to function like the tab button (moving focus to the next focusable item) and the right arrow key to function as a shift+tab (moving focus to the previous focusable item)? I've made some progress with the ...

javascriptjqueryhtmlfocussetfocus

Facing issues with response.end() function in Node.js

Based on my understanding, the response.end() function should be called after every response as per the documentation in the nodejs api which can be found here. However, when I do call the response.end(), the HTML file is not loaded onto the browser. Bel ...

javascripthtmlnode.js

Utilize ASP to limit the application of a CSS file exclusively to the child page

My website consists of a master page and several child pages. I have created specific CSS classes for styling. However, I only want certain child pages to utilize these styles while the master page should always use them. How can I limit the access to th ...

.netcss

Is it possible to use XPath to target an element that does not have a distinctive id

Currently, I am experimenting with Selenium and trying out new things. I attempted to create a program that automatically clicks the 'Like' button on YouTube using XPath. However, I realized that the XPath I used is incorrect. Can someone please ...

c#htmlxmlseleniumxpath

top-sticky and logo visibility

Struggling with an issue related to displaying a logo in a sticky header. The menu works, but need the logo to shrink when header is sticky. https://i.sstatic.net/jDNsb.png This is what I need: https://i.sstatic.net/szzRC.png My current code snippet: ...

htmlcssbootstrap-4

Is it possible to manipulate CSS on a webpage using javascript?

I have incorporated this piece of JavaScript to integrate a chat box onto my website: window.HFCHAT_CONFIG = { EMBED_TOKEN: "XXXXX", ACCESS_TOKEN: "XXXXX", HOST_URL: "https://happyfoxchat.com", ASSETS_URL: "https://XXXXX.cloudfront.ne ...

javascripthtmlcss

Tips for utilizing the form.checkValidity() method in HTML:

While delving into the source code of a website utilizing MVC architecture, I encountered some difficulties comprehending it fully. Here is a snippet of the view's code: function submitForm (action) { var forms = document.getElementById('form& ...

javascripthtmlforms

Is it possible to customize individual CSS attributes for a section within a webpage's layout using a view?

When I render a partial 'calendar/show' in two different views, I'm facing an issue. In view A, everything looks perfect with the right font sizes, but in view B, the font size appears too large. I'm looking for a way to adjust the fon ...

htmlcssruby-on-railsruby

Turn only one bracket on the accordion

When clicking on a specific header, I want only one chevron to rotate instead of all the chevrons rotating. I am currently unsure how to specify which chevron should rotate individually. My project is in ASP.NET MVC 5 and I am using razor view to loop th ...

javascriptjquerycss

written messages on physical chips

I am interested in creating a unique combination of chips and normal text input. On this site https://material.angular.io/components/chips/overview#chip-input, it demonstrates how to insert chips inside an input field. However, I am looking to merge them w ...

htmlangulartypescriptangular-material

Bring to life in both directions

I want to incorporate Animista animations to make a button scale in from the left when hovering over a div block, and then scale out to the left when the mouse moves out of the div block. Check out my code snippet below: http://jsfiddle.net/30sfzy6n/3/. ...

htmlcss

Display Descriptions Upon Hovering Over Images

I am attempting to utilize JavaScript to display the caption of an image only when it is being hovered over, and to have a default caption shown when no image is being hovered. <ul class="logos"> <li class="image-1"></li> <li ...

javascripthtmlcaption

Struggling to align text to the far left within a text area using Bootstrap

When I accidentally place my cursor earlier in the text area, it starts writing from that point, leaving some unwanted spaces at the beginning. I prefer it to start from the extreme left, similar to how it behaves in input boxes. Below is the code snippet ...

htmlcsstwitter-bootstraptextarea

Select either one checkbox out of two available options

My form includes two checkboxes, allowing users to click on both of them. I'm wondering if it's possible to set it up so that only one checkbox can be selected at a time. For example, clicking on the first checkbox would turn it on while turning ...

javascripthtmljquerycss

What is the best way to toggle a div and dynamically load content into it while it's open?

I am looking to create a toggle effect where a div opens, loads a page within it, and then can be closed again. My goal is to achieve this functionality with multiple links on the page. <div id="main-nav"> <div id="menu-container"&g ...

javascriptjqueryhtmlcss

Avoid sudden page movements when validating user input

After successfully implementing the "Stars rating" feature from https://codepen.io/462960/pen/WZXEWd, I noticed that the page abruptly jumps up after each click. Determined to find a solution, I attempted the following: const labels = document.querySelect ...

javascriptcss