5

wp_list_categoriesCSS を使用して項目間にコンマを挿入する出力のスタイルを設定しようとしています。しかし、コンマの前に空白があり、どこから来ているのか真剣に理解できません!

デモと比較のためにjsbinを作成しました。

スクリーンショット: ここに画像の説明を入力

HTML:

<ul id="category-listing">
    <li class="cat-item cat-item-6"><a href="#" title="View all posts filed under Branding">Branding</a>
</li>
    <li class="cat-item cat-item-4"><a href="#" title="View all posts filed under Environment">Environment</a>
</li>
    <li class="cat-item cat-item-5"><a href="#" title="View all posts filed under Exhibition">Exhibition</a>
</li>
    <li class="cat-item cat-item-8"><a href="#" title="View all posts filed under Lecture">Lecture</a>
</li>
    <li class="cat-item cat-item-9"><a href="#" title="View all posts filed under Photography">Photography</a>
</li>
    <li class="cat-item cat-item-10"><a href="#" title="View all posts filed under Print">Print</a>
</li>
</ul>

CSS:

li {
  font-size: 46px;
  display: inline;
  margin: 0;
  padding: 0;
}

#category-listing li:after {
  content: ', ';
}
4

3 に答える 3

5

HTMLコードに空白があるため、空白が表示されます。

終了</li>タグは新しい行にあります。キャリッジ リターンは HTML では空白としてカウントされるため、リスト アイテム要素の末尾に空白があります。

それが表示されている理由は、あなたが使用しているためですdisplay:inline。ussign inline(またはinline-block) の場合、「この要素をプレーン テキストとして扱う」ことを意味するため、空白が関連inlineします。したがって、空白はテキストの意図的な部分と見なされます。

これを取り除く最善の方法は、</li>終了タグを残りのテキストと同じ行に配置して、そこに空白がないようにすることです。

他にも多くの方法がありますが、そのほとんどは非常にハックな CSS を使用しています。単にスペースを閉じることが、最も簡単なオプションです。

次善の策は、float:leftの代わりに使用に切り替えることですdisplay:inline。これも問題に対処しますが、全体のレンダリング方法が変更されるため、これを補うために CSS にさまざまな変更を加える必要があります。

于 2013-05-15T11:50:01.183 に答える
2

リスト項目内でアンカーをフローティングすると、この問題が解決されます。

li a {float:left;}
于 2013-05-15T11:42:36.637 に答える
0

ディスプレイspaces付きだからです。inline次の 2 つの選択肢があります。

  1. スペースを削除します:

    <ul id="category-listing">
    <li class="cat-item cat-item-6"><a href="#" title="View all posts filed under Branding">Branding</a>
</li><li class="cat-item cat-item-4"><a href="#" title="View all posts filed under Environment">Environment</a>
</li><li class="cat-item cat-item-5"><a href="#" title="View all posts filed under Exhibition">Exhibition</a>
</li><li class="cat-item cat-item-8"><a href="#" title="View all posts filed under Lecture">Lecture</a>
</li><li class="cat-item cat-item-9"><a href="#" title="View all posts filed under Photography">Photography</a>
</li><li class="cat-item cat-item-10"><a href="#" title="View all posts filed under Print">Print</a></li>
</ul>

  2. 使用float:

    ul {overflow: hidden;}
ul li {float: left;}
于 2013-05-15T11:44:35.457 に答える