Home/ Questions/Q 972441
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T03:07:30+00:00

The code below works fine at 1280×800, however, if I add another thumbnail, the

  • 0

The code below works fine at 1280×800, however, if I add another thumbnail, the width of the <ul> becomes equal to the <body> width and <ul> isn’t centered anymore. I don’t want to specify the <ul> width, which would solve the problem. I want thumbnails to occupy all free space regardless of resolution, but at the same time having equal margins on the left and right. Is there any pure CSS way of doing this without calculating the <ul>‘s width in JavaScript each time the page loads or using CSS3 media queries?

<html>
<head>
    <title>Gallery</title>
    <style type="text/css" media="screen">
        body {
            text-align: center;
        }
        ul {
            padding: 0;
            display: inline-block;
            list-style-type: none;
        }
        li {
            float: left;
            width: 200px;
            background-color: violet;
        }
    </style>
</head>
<body>
    <ul>
        <li>thumbnail</li>
        <li>thumbnail</li>
        <li>thumbnail</li>
        <li>thumbnail</li>
        <li>thumbnail</li>
        <li>thumbnail</li>
    </ul>
</body>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can still use lists, by adding the “display: inline-block” to li elements themselves

    <html>
<head>
<title>Gallery</title>
<style type="text/css" media="screen">
    body {
        text-align: center;
    }
    ul {
        padding: 0;
        list-style-type: none;
        width:100%;
    }
    li {
        width: 200px;
        display:inline-block;
        background-color: violet;
    }
</style>
</head>
<body>
<ul>
    <li>thumbnail</li>
    <li>thumbnail</li>
    <li>thumbnail</li>
    <li>thumbnail</li>
    <li>thumbnail</li>
    <li>thumbnail</li><li>thumbnail</li>
</ul>
</body>​​​​​
</html>
    • 0