2

箇条書きの LI のように見えるレイアウトを作成しようとしていますが、LI を使用していません。同じリスト内の異なるアイテムに異なる箇条書きイメージを持たせたいので、LI を使用できません。そして、私が言えることから、LI の箇条書きのスタイルは UL でしか設定できないため、同じ UL 内のすべての LI は同じ箇条書きのイメージを持つ必要があります...そして私はそれを望んでいません。LI のスタイル設定方法について間違っている場合は、訂正してください。

これは、LI の弾丸を再作成するためにスタイルを設定しようとしている HTML です。

<div><img src="..."/><p>Inbox:</p></div>

次の目標を達成するための最善の方法がわかりません。

  • 項目テキストボックスの左側に箇条書き画像を表示して、テキストが多い場合に箇条書きが左余白にぶら下がるようにします。テキストは箇条書きの画像の下に折り返されるべきではありません。
  • ブレット画像をテキストの最初の行の中央に配置します (テキストの折り返しの場合)。また、テキストのサイズが変更されたときに箇条書きの中央を揃えます。

私の高レベルの目標は、Web ページでTaskPaper のUIを再作成することです。

私が一番気に入っているソリューションを持っている人に無料のライセンスを喜んで与えます。

ありがとう、

ジェシー

4

5 に答える 5

5

CSS クラスを使用してそれを行うことができます。

<HTML>
  <HEAD>
    <STYLE>
      LI.circle { list-style: circle }
      LI.square { list-style: square }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI class="circle">Circle</LI>
      <LI class="square">Square</LI>
      <LI>Third</LI>
  </BODY>       
</HTML>

そして、任意の画像が必要な場合は、次のようにしますLI.whatever { list-style: url(myimage.png) }

于 2009-07-14T04:18:18.043 に答える
1

@Dels -- Your example using LIs with IMGs inside would actually work because you're still using the LI element in front of each image. The effect would be something like

  • <\img> stuff
  • <\diff img> more stuff

You'd still have the regular bullet style, but with an image beside it. I think you were trying to cover that with the image by margin-ing it, but if that would work, which I'm not even confident about, I believe you'd have to use a negative left margin.

于 2012-04-23T17:02:31.667 に答える
1

代わりにスパンを使用できます

<span><img src="">text</img></span>

または、デフォルトの ulを使用できますが、li ごとに異なる画像を使用できます

<ul>
<li><img src="image1">text1</img></li>
<li><img src="image2">text2</img></li>
</ul>

次に、cssを使用してliの各画像のマージンを揃えます

li img{margin-left: 5px}

ええ、そのようなもの

于 2009-07-14T04:17:20.133 に答える
1

list-style-type: none; も使用できます。背景画像を使用する

于 2009-07-14T04:31:26.673 に答える
1

リストを作成したくなくて、リンクに黒丸を付ける必要がある場合は、次のように作成できます。

<a id="bulletlink" href="">hey</a>

css は次のようになります。

bulletlink{
background-image:url(../some/bullet.png) 0px 6px no-repeat;
padding-left:10px;
}

画像は、背景が透明な 8px x 8px の単純な黒い円で、箇条書きと重ならないようにアンカーまたはテキストにパディングを与えます。明らかに、div、画像、テキスト、ヘッダーなどを含むほとんどすべてに対してこれを行うことができます...背景画像を配置できる必要があるだけです。

于 2012-02-21T20:45:49.213 に答える