2

一直在尝试解决这个问题几个小时，但无济于事......我真的想要一个可以响应式工作的项目符号列表（al browser width），看起来像这样......

基本上整个事情都需要居中，您可以将文本居中，但不能使用项目符号图像来居中:-(

在此处输入图像描述

我显然“喜欢”使用 UL/LI。但即使不这样做，我也无法理解如何去做。最后我什至没有解决新手/企业家的问题，假设我可以叠加图像？无论如何，任何建议表示赞赏。如果可能的话，我真的需要它来缩小响应式设计......

编辑 ：

我试过我试过浮动，内联，偏移，使用网格系统，什么都没有...... :-(

编辑2：

应内森的要求，我将发布我的解决方案之一......

<div class="section group">       

    <div class="col span_1_of_2">
        <p style="float:right;" class="darkGrey">
            <span class="sprite step2"></span>
        </p>
    </div>

    <div class="col span_1_of_2">
        <h3 class="darkGrey">We then seek to place the you in our network of organizations who actively recruit developers.</h3>
    </div>

</div>

^ 以上只是将我的勾号一直推到右边.....

编辑 3

我刚刚使用图像http://jsfiddle.net/fSSeK/尝试了此操作，但它起作用了，但是我的要点是精灵背景图像，它不起作用！

4

2 回答 2

3

确切的技术取决于您想要显示的项目符号类型，但对于经典项目符号，这里是一种简单的方法。

您需要从浏览器的内置样式中删除项目符号list-style-type: none，然后将列表元素中的文本水平居中，并使用:before伪元素在其内容之前插入项目符号。此项目符号将居中。

示例 CSS：

ul {
    list-style-type: none;
}

li {
    text-align: center;
}

li:before {
    content: "• "
}

看到它在行动。

于 2013-08-26T12:14:12.690 回答
1

使用带有背景图像的伪元素

对于典型列表：

<ul>
    <li>The first line</li>
    <li>The Second line which is longer</li>
</ul>

并使用以下CSS：

ul {
    text-align: center;
}
ul li {
    border: 1px dotted blue;
    display: block;
    position: relative;
}
ul li:before {
    content: "";
    background: url(http://placehold.it/20x20) left top no-repeat;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}

见小提琴演示：http: //jsfiddle.net/audetwebdesign/S2Mvn/

li:before如果需要更精确的对齐，可以在元素上使用绝对或相对定位。

于 2013-08-26T12:17:08.733 回答