作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这是我第一次尝试响应式设计,所以我尽量保持简单。
我有一个 <ul>
居中对齐,每行 3 张图像。但是,如果最后一行只有 1 或 2 张图像,则整行居中对齐,我希望图像向左对齐(因此它们与顶部的垂直对齐)。
这可以通过 float:left
轻松完成.但是,我希望每行的图像数量适应窗口大小,同时保持 <ul>
以屏幕为中心。
这是一个 jsFiddle底行只有一项,居中。如果您调整窗口大小使其变小,每行中的数字或元素将调整并且列表将保持在屏幕中央,但最后一行仍将居中。有什么方法可以让最后一行向左对齐吗?
编辑:根据要求,这里有一些图片。这就是我要找的:<ul>
在屏幕上居中,但底行向左对齐。
但是,如果我们调整窗口大小,列表会适应,但是 <ul>
仍然在屏幕上居中,底行仍然向左对齐。
我怎样才能做到这一点?
最佳答案
通常我会建议给 ul 一个固定的宽度和边距:0 auto;居中,但是如果您希望它随页面扩展,则只需给它一些固定的左右边距。
ul {
max-width:800px;
margin: 0 50px;
}
ul li {
float: left;
}
ul li img {
margin:5px;
}
关于css - 响应 : How to float:left li with centrally aligned ul?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11038498/
我是一名优秀的程序员,十分优秀!