Question

<div class="oringal">
    <ul class="rank">
<li class="rank-1">
    <img src="http://netdna.webdesignerdepot.com/uploads/packaging_design/Tetra_pak_New_packaging_Juice7_by_KATOK.jpg" />
    <p>1</p>
</li>
<li class="rank-2">
    <img src="http://netdna.webdesignerdepot.com/uploads/packaging_design/21.jpg" />
    <p>2</p>
</li>

我想获得如下排名顺序，但我不想更改html，我怎样才能更改div.oringal中的css以获得排名顺序如下。第一个在中心，第二个权利，第三左翼

请参阅jsfiddle页面http://jsfiddle.net/6grsm/1/上的完整代码，非常感谢

Answer 1

“我希望得到序列3 1 2，但我不想改变div.original中的html序列，我的问题是，我应该如何更改css ”

从那个评论来看，似乎你实际上不来改变元素的位置，而是改变编号的顺序，这是一个完全不同的问题。最简单的方法是使用start标记的（已弃用，但仍然看似支持）ol属性。在CSS中，您还可以为counter-increment标记设置li，这样可以自定义li标记显示的内容。各种方法的示例在this Stackoverflow answer

中

Answer 2

您可以尝试使用绝对定位。看起来您正在创建购物车布局，因此我假设您有一个结构合理的页面。

请参阅小提琴演示：http://jsfiddle.net/audetwebdesign/rC59T/

您的HTML基本上就是这样：

<div calss="panel-wrap">
<ul  class="rank">
    <li class="rank-1">
        <img ... />
        <p>1</p>
    </li>
    <li class="rank-2">
        <img ... />
        <p>2</p>
    </li>
    <li class="rank-3">
        <img ... />
        <p>3</p>
    </li>
</ul>
</div>

对于CSS：

.panel-wrap {
    width: 460px; 
}

如果您想要添加背景图片等，.panel-wrap非常有用。

ul.rank {
    list-style: none outside none;
    padding: 0;
    margin: 0;
    position: relative; /* this will force the li to be positioned with respect
                           to this block level container */
    border: 1px solid gray;
    height: 200px;
}
ul.rank li {
    width: 150px;
    top: 0;           /* pin top and bottom so that the li fills in the height
                         of the parent container */
    bottom: 0;
    border: 1px solid red;
    position: absolute;
}
ul.rank img {
    width: 150px; 
    xheight: 90px; /* Careful not to adjust both width and height which could
                      distort your images */
}
ul.rank p {
    border: 1px dotted blue;
    text-align:center;
    position: absolute;
    bottom: 10px;
    left: 0;    /* pin left and right so the p fills in the 
                   width of the li... */
    right: 0;
    margin: 0;
}

技巧是以均匀间隔的增量调整每个列表项的左偏移量：

.rank-3 {
    top: 0;
    left: 0;
}
.rank-1 {
    top: 0;
    left: 160px;
}
.rank-2 {
    top: 0;
    left: 320px;
}

大优势

你可以做的是使用JavaScript / jQuery动态设置左偏移量，并创建一个交互式页面，用户可以单击按钮并滚动浏览一系列目录项。

CSS位置<li>元素</li>

2 个答案: