html - 居中 ul 列表元素，即使 ul 比视口(viewport)更宽(见解释)

Question

我有一个 <ul>居中并包含图片，每张图片并排显示在一行中。当客户端调整浏览器大小或分辨率低于 <ul> 的宽度时，问题就出现了。里面有照片。

我想要实现的是 <ul> 的中心始终保持在浏览器的中心(即使浏览器的宽度小于 <ul> 的宽度)，并且 <ul> 的两侧应该在浏览器之外被平等地削减。

不使用 JavaScript 是否可行？

Answer 1

是的，尽管您需要额外的 <div> ，并且此解决方案假定 <ul>具有已知的固定高度和宽度。

如果我们能看到您的代码，回答起来会容易一些，但假设您有这样的代码:

<style type="text/css">
    #pics {
        width: 300px;
        margin: 0 auto;
    }

    #pics li {
        float: left;
    }
</style>
...
<ul id="pics">
    <li><img src="pic1.jpg"  width="100" height="100" /></li>
    <li><img src="pic2.jpg"  width="100" height="100" /></li>
    <li><img src="pic3.jpg"  width="100" height="100" /></li>
</ul>

然后你可以像这样得到你正在寻找的居中行为::

<style type="text/css">
    #centerer {
        height: 100px;
        position: relative;
    }

    #pics {
        position: absolute;
        left: 50%;
        margin-left: -150px;
        width: 300px;
        margin: 0 auto;
    }

    #pics li {
        float: left;
    }
</style>
...
<div id="centerer">
    <ul id="pics">
        <li><img src="pic1.jpg"  width="100" height="100" /></li>
        <li><img src="pic2.jpg"  width="100" height="100" /></li>
        <li><img src="pic3.jpg"  width="100" height="100" /></li>
    </ul>
</div>