7

そのため、カスタムの箇条書き画像を使用してテキストを垂直方向に揃える方法を見つけようとしています。ここに私が持っているものがあります:

<ul>
    <li>LINE OF TEXT</li>
    <li>LINE OF TEXT</li>
    <li>LINE OF TEXT</li>
</ul>

そしてCSSについては...

#div .class
{
    color: #4c361c;
    font-size: 13px;
    list-style-image: url(../images/image.png);
}

#div .class li{ }

これを行う方法について誰かアイデアがありますか?

4

2 に答える 2

6

ここにデモがあります。

背景画像を使用すると、目的の効果が得られます。

HTML

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

CSS

ul {
    list-style: none;
}

ul > li {
  background: url('../imgpath/bullet-image.png') no-repeat left center;

  /* Adjust the padding for your custom bullet image */
  padding: 10px 0 10px 34px;
}
于 2012-12-03T02:08:10.520 に答える
1

今あなたを定義し、あなたのデザインに従ってにli background bullets設定しますbackground-position

このように

CSS

ul{
margin:0;
  padding:0;
  list-style:none;
}
li {
background:url("http://www.un.org/en/oaj/unjs/efiling/added/images/bullet-list-icon.jpg") no-repeat 0 -2px;
  padding-left:20px;
  line-height:14px;
  font-size:14px;
  margin-top:12px;
}

ライブデモ

于 2012-12-03T05:08:00.073 に答える