4

<li>の要素で構成される水平メニューがありますdisplay: inline。

要素はシームレスに隣り合っているはずです。

ソース コードでは、デバッグを容易にするために、各 li を 1 行にまとめたいと思います。

<li class="item1 first"> ... </li>
<li class="item2"> ... </li>
...

ただし、\n各要素の後に を追加すると、メニュー項目間にギャップが生じます。これは意図した動作だと思いますが、巧妙な「空白」設定などを使用してオフにする方法はありますか?

編集: float は使用できません。これは、リスト項目を中央に配置するオプションを備えた CMS にあります。

4

4 に答える 4

5

レンダリングの問題を回避できますが、次のようにコードを保守可能に保ちます。

<ul
  ><li>item 1</li
  ><li>item 2</li
  ><li>item 3</li
></ul>

空白は削除されますが、CMSが入力したマークアップを混乱させない限り、テキストエディタでアイテムを編集するのは簡単です。

于 2009-12-01T12:23:16.440 に答える
1

CSSを編集する機能はありますか？その場合は、<li>要素のパディング/マージンを調整してみてください。読みやすさの面倒な作業のようです。

使用しているブラウザに応じて、HTML Tidy http://users.skynet.be/mgueury/mozilla/を入手できます。これにより、ソースを整理するオプションが提供され、デバッグに十分役立つ場合があります。

于 2009-12-01T12:22:49.067 に答える
0

CSS+float はあなたの友達です。

于 2009-12-01T12:01:47.070 に答える
0

HTML は空白に依存しないため、改行を追加しても効果はありません。ただし、ブラウザのレンダリング エンジンによっては、これが正しく行われない場合があります。

おそらくやりたいことは、追加することです

float: left;

あなたのliタグにそれらを並べて表示します。

于 2009-12-01T12:03:21.120 に答える