html - リスト スタイル イメージの配置

Question

の水平方向と垂直方向の配置を決定する方法があるかどうか疑問に思っていlist-style-imageますか?

現時点では、次のようになっているためです。

_ リストテキスト

そして、私はそれがこのようになりたいです

– リストテキスト

どうもありがとう！

Answer 1

たとえば、いくつかのアプローチを試すことができます。

<h3>Using a list-style-image</h3>
<ul class="basic">
    <li>Hello!</li>
    <li>Good-Bye!</li>
    <li>See you later!</li>
</ul> 

<h3>Using a Background Image on li</h3>
<ul class="bg-img">
    <li>Hello!</li>
    <li>Good-Bye!</li>
    <li>See you later!</li>
</ul>

次の CSS を見てください。

ul.basic {
    list-style: none;
    list-style-image: url(http://placehold.it/20x20);
    margin: 0 0 0 0;
}
ul.basic li {
    margin: 1.00em 0 0 0;
    padding: 0 0 0 0;
}

ul.bg-img {
    list-style: none;
    margin: 0 0 0 0;
}
ul.bg-img li {
    background-image: url(http://placehold.it/20x5);
    background-repeat: no-repeat; 
    background-position: left center;
    margin: 1.00em 0 0 -30px;
    padding: 0 0 0 30px;
}

最初のケースでは、たとえばリスト画像を 20x20 ピクセルの正方形にして、画像の中央にハイフンを埋め込むことができます。liただし、フォント サイズが変更されると、リスト イメージが要素のベース ラインに固定されるため、垂直方向のセンタリングは維持されません。

2 番目の例では、リスト スタイルをオフにして、li要素に背景画像を配置します。繰り返しますが、ハイフンを画像に埋め込み、左中央に配置します。liこのアプローチでは、要素の左マージンとパディング、およびbackground-positionプロパティを調整することで、ハイフン モチーフの位置をある程度制御できます。

参考までに、http: //jsfiddle.net/audetwebdesign/JKZLe/をご覧ください。

Answer 2

これは、webkit と mozilla でそれぞれ制御されますが、-webkit-padding-startとは 要素と要素に-moz-padding-start適用されます。オーバーライドできます(これは IE でも機能します)。<ul><ol>padding-left

ul {
    padding-left: 40px;
}