CSS list items do not expand

I have a list with links inside each item and I want the item size to remain fixed regardless of content.

Below is the CSS code:

.files {
    display: inline-block;
    padding: 0;
    margin: 0 auto;    
}

.files li {
    display: inline;

}


.files li a { 

    color: black;
    float: left;
    padding: 8px 15px;
    text-decoration: none;
    border: 1px solid #ddd;
    margin: 0 3px;
    background-color: #ffffff;
}

Here is the corresponding HTML:

<ul class="files">
  <li>
    <a id="some_id" href="http">123</a>
  </li>
</ul>
htmlcsslistflexboxhtml-lists

Answer №1

If you want to assign fixed dimensions of width and height to the elements within the <li> tags, you will need to modify the CSS property from display: inline; to inline-block

ul.files li {
    display: inline-block;
    width: 150px;
    height: 150px;
}

To center text:

To horizontally and vertically center the content inside the li elements, you can utilize display: inline-flex

ul.files li {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
}

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

Issue with DIV positioning in IE when another DIV is animated downwards

Here's how my page structure looks like: <header> <div class="slide"> <!---- some elements here ---> </div> <nav> <ul> <li id="open"></li> <! --- other parts of the navigation ...

jqueryhtmlcssinternet-explorer

Why is the option value not visible in the dropdown selection list?

On my website, I am trying to use a date range to aggregate data from MySQL and display it based on the selected time frame. However, I am facing an issue where the values for each option in the drop-down menus are not showing up. Below is the PHP code I a ...

phphtmlmysql

How can I resize my image to match the dimensions of the navigation bar?

Is there a way for me to match the width of my navigation bar with that of an image? The issue I'm facing is that the original size of the image is 497 x 298px, and in order to stretch it across the full width of the page while maintaining margins of ...

htmlcssnavigationimage-resizingresponsive

Safari does not stop the scrolling of the <body style="overflow-y: hidden"> tag

Welcome to this simple HTML page <body style="overflow-y: hidden"> ... </body> This page is designed to prevent scrolling by using the CSS property overflow-y: hidden. While this functionality works as intended on most browsers, it does ...

cssscrollsafarioverflowmobile-safari

Ways to position one div below another div

I need the #blue div positioned below the #green div The #blue div should have a margin-top: -10px; property <style> #red{ width: 400px; border: 1px solid red; } #green{ width: 100%; height: 100px; ...

csshtmlmargin

Creating a CSS image grid without relying on object-fit: cover can be achieved by

My goal is to create a horizontal masonry grid similar to Adobe Stock and Shutterstock without altering image aspect ratios by using object fit or any other stretching techniques. All the solutions I've found so far involve object-fit: cover, which c ...

htmlcssimagegridresponsive

What is the best way to place a div inside a navbar element inline?

Having a bit of trouble with my HTML code. I'm working on creating an offcanvas navbar. Here's the code snippet: <nav class="navbar navbar-dark bg-dark"> <div class="container-fluid"> <a cl ...

htmlcssbootstrap-5

Divs are stubbornly resisting the urge to behave like block elements

.useless { float: right; clear: right; border: 1px dashed blue; height: 50px; width: 100%; } div.pretraga { border: 3px groove red; width: 20%; float: right; margin-right: 5%; border-top: 0; display: flex; justify-content: center; height: 250px; <div cl ...

htmlcssflexbox

The alignment of the textarea is off due to an issue with the md

I'm experiencing an issue with the alignment of options in my form. The md-maxlength attribute is causing one line to be higher than the rest, as shown in the image below. https://i.sstatic.net/3J3Ts.png My goal is to move that specific textarea one ...

htmlcssangularjs

Creating XPaths for HTML using Selenium: A step-by-step guide

What is the proper way to create an xpath expression for the following block of html? <li> <a href="/parade/storeus/browse/Home-Accents-Radios/_/N-1c7kmv"> Radios </a> </li> ...

htmlseleniumselenium-webdriverwebdriver

Searching for a specific element using a CSS selector

Looking for a way to find an element using a CSS selector in Chrome, I followed these steps: Right-click on the object Select "inspect" Right-click on the highlighted area in Chrome developer tools Choose "copy" Click on "copy selector" This is the cod ...

pythoncssseleniumcss-selectors

Extract information from a page that must navigate through an initial webpage

Looking to scrape a webpage that requires user input and clicks to access. Without this process, attempting to reach the page via URL will result in a 404 error. The necessary input is: The SSL certificate on the page is invalid, so verification had to b ...

pythonhtmlweb-scrapingbeautifulsouppython-requests

Organizing a series of numbers into distinct columns or separate lists to prepare for visualization in Python

Being new to Python, I must apologize if this question seems easy. (it appears simple to me, but I'm having trouble...) After performing an IV sweep on a Keithley SMU 2400, I received a list of numbers in the following order: [v0, c0, t0, v1, c1, t1 ...

pythonlistnumpymatplotlib

Is the side tab overflowing the window due to its absolute positioning?

My browser window has a side tab that slides in when clicked using jQuery. The issue I'm facing is that the tab overflows the body due to its absolute positioning. However, the overflow stops when the tab is pulled in by jQuery. It only happens when t ...

javascriptjqueryhtmlcss

How can text be concealed within an input field?

My degrees converter code is functioning well, but I have an issue. When I input a number for one temperature type, the conversion for the other two types is displayed correctly. However, if I then enter a number for another temperature type, the previous ...

javascripthtmlcss

Unpredictable hues in a headline

Can the text in an H1 tag have each word appear in a different random color, and then refresh to show new random colors? I have 5 specific colors in mind that I'd like to use. How would I go about coding this? ...

javascriptjqueryhtmlcss

Different ways of manipulating images with JavaScript

I attempted to tackle the issue independently, but I'm stumped. Is there a way to adjust the width of an image in JS when the screen dimensions are changed? ...

javascripthtmlimagewidthscreen

Encountering issues with integrating an external plugin with AngularJS code

For my app, I am attempting to incorporate intercom for monitoring user activity. It functions correctly when placed inside a script tag in index.html. However, I encounter an error when trying to use it in a .ts file as shown below: app/components/rocket/ ...

javascriptjquerycssangularintercom

The success notification transforms into a cancellation alert once the file has been successfully uploaded

I'm struggling to show the correct message after a file is successfully uploaded. Currently, when a file is successfully uploaded, the success message briefly displays but then quickly changes to the cancel message. I want the success message to rema ...

phpjqueryhtml

Adjust text size based on device orientation changes

I'm struggling to dynamically change the font size based on screen orientation and width. How can I adjust the font size when switching between landscape and portrait mode? I attempted using an event listener, but it's not updating the font size. ...

htmlangularsassionic2