html - カスタム HTML リストの箇条書きとテキストの折り返し/配置

Question

独自のカスタム HTML リストの箇条書きを作成しようとしていますが、残念ながらテキストを揃えるのに苦労しています。何かヒントはありますか?

マークアップを変更できません。箇条書きはアンカー タグ内にある必要があります。

<li> 
   <a href="#"> <div class="bullet"></div> Text </a> 
</li>

これは、カスタムの箇条書きと標準の箇条書きを含む画面です。

JSFiddle: http://jsfiddle.net/XSUYE/

Answer 1

spanプレーンテキストの周りにタグを付けることはできますか? そうすれば、箇条書きがアンカー タグ内に残ったまま、より多くの制御が可能になります。

ここを参照してください: http://jsfiddle.net/vzCpp/1/

ul {
    width: 200px;
    font-family: Arial;
    line-height: 1.5em;
}

.list {
    list-style-type: none;
    margin: 0 !important;
    padding: 10px !important;
}

.list a {
    vertical-align: top;
}

.bullet {
    width: 10px;
    height: 10px;
    background: #eee;
    border: solid 1px #aaa;
    display: inline-block;
    margin-right: -12px;
}

.list a span:last-child {
    display: inline-block;
    margin-left: 24px;
    vertical-align: top;
}