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>

居中ul列表元素，即使ul比视口宽（参见说明）

1 个答案: