设置宽度为“ul”的元素

Question

我想将未排序的列表设置为“背景”。要做到这一点，我已经指定它非常宽，所以它匹配任何屏幕打开页面包括2560px宽度。但除非有诀窍或其他原因，否则我不能完全使用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，所以我更清楚我想要做什么。

任何帮助表示赞赏

Answer 1

this fiddle你想要的是什么？当你说“背景”时，我认为你没有正确解释

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

Answer 2

你想要完成这样的事吗？

只要您将<ul>设置为top: 50%;高度的一半，您就可以使用margin-top将<ul>放在屏幕中间。例如，如果<ul>高度为100px，则您需要将margin-top: -50px;与top: 50%; position: absolute;一起设置，以便将<ul>完全垂直居中屏幕的中心。

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

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

Answer 3

仅供参考，解决方案在于显示：block-inline。 :)感谢您的帮助