2

これを数時間解決しようとしても役に立たない....私は本当に、このように見えるレスポンシブ（ブラウザ幅）に動作する箇条書きリストが欲しい...

基本的に全体を中央に配置する必要があります。テキストを中央に配置することはできますが、箇条書きの画像のスパンを中央に配置することはできません:-(

ここに画像の説明を入力

UL/LI を使用したいのは明らかです。しかし、それをしなくても、私はそれを行う方法を理解できません。最後に初心者/起業家のビットにさえ対処していません。画像をオーバーレイできると仮定しますか? とにかくアドバイスをいただければ幸いです。可能であれば、レスポンシブデザインにも縮小する必要があります...

編集 ：

私は、グリッドシステムを使用して、フローティング、インライン化、オフセットを試みましたが、何も試しませんでした.... :-(

編集2：

ネイサンの要請で、私は私の解決策の1つを投稿します...

<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

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 に答える