0

私は PHP を使用してリストを生成しています。リスト項目にさらに作業が必要な場合は、テキストの左側に赤い太字の感嘆符を付けます。ただし、WebKit ブラウザーでは、感嘆符の付いたアイテムは次のようにわずかにインデントされます。

  • アイテム
  • アイテム
    • ！アイテム

これは、同じ問題を引き起こす HTML のサンプルです。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="ISO-8859-1" />
<style>
#needswork {
        color:#F00;
        font-weight:bold;
        float:left;
}
</style>
<title>Dodgy lists</title>
</head>
<ul>
<li><a href="http://www.linuxtech.ie"><em>Atlanta</em> - 24 May</a></li>
<li><div id="needswork"></div><a title="Still needs work" href="http://www.linuxtech.ie"><em>Ashgabat</em> - 2 Feb</a></li>
<li><div id="needswork">!</div><a title="Still needs work" href="http://www.linuxtech.ie"><em>Paris</em> - 3 June</a></li>
</ul>
</html>

リストの 2 番目の項目には、ブロック内にテキストがなく、問題ないようdivに見えることに注意してください。それをJS Fiddleにコピーしましたが、効果はさらに奇妙です。

http://meyerweb.comから CSS リセットを使用してみましたが、違いはありませんでした。

ありがとう。

4

1 に答える 1

2
  1. <span>の代わりに a を使用し<div>ます。
  2. float:leftCSS から を削除します。

また、同じ ID を持つ要素を複数持つべきではありません。代わりにクラスを使用してください。

ここで修正を確認できます: http://jsfiddle.net/g29dz/

于 2013-05-24T18:22:36.020 に答える