0

我想将未排序的列表设置为“背景”。为此，我将其指定为非常宽，因此它与打开页面的任何屏幕（包括 2560 像素宽度）匹配。但除非有什么技巧，否则我不能让它完全以 CSS 为中心。我愿意走jquery方式。从技术上讲， ul 将具有与 background-position:top center 相同的效果；

我没有附加代码，而是按照它应该工作的方式附加图像（添加代码）

<div style="background-color:black; width:100%; overflow:hidden; height:302px; text-align:center; position:relative">
<ul style="padding:0px; margin:0px; text-align:center; width:2560px; height:100%; margin:0 auto 0; position:relative;">
    <li class="image"></li><li class="image"></li><li class="image"></li><li class="image"></li><li class="image"></li><li class="image">

</ul>
</div>

我使用了内联 CSS，所以我想做什么更清楚。

在此处输入图像描述

任何帮助表示赞赏

4

3 回答 3

2

这是你想要的小提琴吗？我认为您说“背景”时没有正确解释

CSS

ul{
    list-style-type: none;
    margin: 0;
    position: relative;
    text-align: center;
    width: 100%;
    background:#FF0000;
}


ul li {
    display: inline-block;
    height: 65px;
    overflow: hidden;
    padding: 0;
    background:#0000FF;
    line-height:65px;
    color:#FFF;
    padding:0 5px;
}
于 2012-11-13T20:49:14.710 回答
1

你想完成这样的事情吗？

只要<ul>将top: 50%;设置margin-top为<ul>. 例如，如果<ul>高度为100px，则需要设置margin-top: -50px;以top: 50%; position: absolute;使 垂直居中<ul>于屏幕中心。

如果您事先不知道高度<ul>，我添加了一些 jQuery 来确定高度并相应地调整 margin-top。您可以<div>在 jsFiddle 上更改容器的高度，以查看<ul>无论容器的高度如何，它都会垂直居中。

http://jsfiddle.net/kreCe/1/

于 2012-11-13T21:03:25.070 回答
0

仅供参考，解决方案在于 display:block-inline。：） 感谢你的帮助

于 2012-12-18T23:58:26.917 回答