Question

以下代码在1280x800下运行正常，但是，如果我添加另一个缩略图，<ul>的宽度将等于<body>宽度，<ul>不再居中。我不想指定<ul>宽度，这将解决问题。我希望缩略图占据所有自由空间，无论分辨率如何，但同时左右边距相等。每次页面加载或使用CSS3媒体查询时，是否有任何纯CSS方法可以在JavaScript中计算<ul>的宽度？

<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>

Answer 1

起初，在思考了你的问题后，我认为这有点不可能。但后来我意识到你可以利用图像的显示方式并在浏览器中工作。请尝试以下代码，看看它是否适用于您的目的：

<html>
<head>
    <title>Gallery</title>
    <style type="text/css" media="screen">
        body {

        }
        div {
            text-align:center;
        }
        .thumb {
            display:inline;
            margin:5px;
        }
    </style>
</head>
<body>
    <div>
        <div class="thumb"><img src="http://cvcl.mit.edu/hybrid/cat2.jpg" width="200"></div>
        <div class="thumb"><img src="http://cvcl.mit.edu/hybrid/cat2.jpg" width="200"></div>
        <div class="thumb"><img src="http://cvcl.mit.edu/hybrid/cat2.jpg" width="200"></div>
        <div class="thumb"><img src="http://cvcl.mit.edu/hybrid/cat2.jpg" width="200"></div>
        <div class="thumb"><img src="http://cvcl.mit.edu/hybrid/cat2.jpg" width="200"></div>
        <div class="thumb"><img src="http://cvcl.mit.edu/hybrid/cat2.jpg" width="200"></div>
    </ul>
</body>

如果您愿意，甚至可以删除图像周围的容器。但它让某些标题开放。

Answer 2

您仍然可以使用列表，方法是将“display：inline-block”添加到li元素本身

<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>

如何在不知道其宽度的情况下使块元素居中？

2 个答案: