34

私のHTMLは次のとおりです。

<ul id="nav">
    <li><a href="./">Home</a></li>
    <li><a href="/About">About</a></li>
    <li><a href="/Contact">Contact</a></li>
</ul>

そして私のCSS：

#nav {
    display: inline;
}

ただし、li の間の空白が表示されます。次のように折りたたんで空白を削除できます。

<ul id="nav">
    <li><a href="./">Home</a></li><li><a href="/About">About</a></li><li><a href="/Contact">Contact</a></li>
</ul>

しかし、これは大部分が手作業で維持されており、よりクリーンな方法があるかどうか疑問に思っていました。

4

8 に答える 8

30

ここにいくつかのオプションがあります。最初に、インラインリストを作成するときの通常の方法を説明します。

<ul id="navigation">
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
</ul>

次に、CSSを使用して、意図したとおりに機能させます。

#navigation li 
  {
    display: inline;
    list-style: none;
  }
#navigation li a, #navigation li a:link, #navigation li a:visited
  {
    display: block;
    padding: 2px 5px 2px 5px;
    float: left;
    margin: 0 5px 0 0;
  }

明らかに、ホバーとアクティブセットを省略しましたが、これは優れたブロックレベルのナビゲーションを作成し、標準を維持しながらこれを行うための非常に一般的な方法です。/ *好みに合わせて微調整したり、背景に色を追加したりすることを忘れないでください* /

テキストとインラインだけで保持したい場合は、追加したいと思うブロック要素はありません。

   margin: 0 5px 0 0; /* that's, top 0, right 5px, bottom 0, left 0 */

空白を削除したい場合は、それに応じて余白/パディングを調整してください。

于 2008-10-27T21:58:17.963 に答える
27

空白を削除するもう1つの便利な方法は、リストのfont-sizeプロパティをに設定し0、リスト要素のプロパティを必要なサイズに戻すことです。

于 2010-09-01T10:57:53.540 に答える
16

本当に必要なのは CSS3 white-space-collapse: discardです。しかし、ブラウザが実際にそのプロパティをサポートしているかどうかはわかりません。

いくつかの代替ソリューションは、タグの末尾に空白を消費させることです。例えば：

<ul id="nav"
    ><li><a href="./">Home</a></li
    ><li><a href="/About">About</a></li
    ><li><a href="/Contact">Contact</a></li
></ul>

私が見たもう1つのことは、HTMLコメントを使用して空白を消費することです

<ul id="nav"><!--
    --><li><a href="./">Home</a></li><!--
    --><li><a href="/About">About</a></li><!--
    --><li><a href="/Contact">Contact</a></li><!--
--></ul>

フロートを使用しても問題ない場合は、thismat のソリューションを参照してください。要件によっては、に<li>設定されている末尾を追加する必要がある場合がありますclear: both;。

しかし、理論的にはおそらく CSS3 プロパティが最良の方法です。

于 2010-06-29T18:05:28.060 に答える
9

リスト アイテムのより良い解決策は、次を使用することです。

#nav li{float:left; width:auto;}

頭痛のないまったく同じ視覚効果があります。

于 2011-08-05T14:55:21.640 に答える
6

非 XML ベースの HTML を採用し、 を省略し</li>ます。

<ul id="nav">
    <li><a href="./">Home</a>
    <li><a href="/About">About</a>
    <li><a href="/Contact">Contact</a>
</ul>

次に、アイテムの表示プロパティをインラインではなくインライン ブロックに設定します。

#nav li {
    display: inline-block;
    /display: inline; /* for IE 6 and IE 7 */
    /zoom: 1; /* for IE 6 and IE 7 */
}
于 2011-01-31T09:29:58.400 に答える
4

問題は、UL のフォント サイズです。0 に設定すると消えますが、実際のテキストをそれほど小さく設定したくないので、LI フォント サイズを任意のサイズに設定します。

<ul style="font-size:0px;">
<li style="font-size:12px;">
</ul>
于 2013-06-04T02:00:26.823 に答える
1

私は同じ問題を抱えていましたが、上記の解決策のどれもそれを修正できませんでした. しかし、これがうまくいくことがわかりました：

これの代わりに：

<ul id="nav">
   <li><a href="./">Home</a></li>
   <li><a href="/About">About</a></li>
   <li><a href="/Contact">Contact</a></li>
</ul>

次のような HTML コードを作成します (リンク テキストの前後の空白): 

<ul id="nav">
   <li><a href="./"> Home </a></li>
   <li><a href="/About"> About </a></li>
   <li><a href="/Contact"> Contact </a></li>
</ul>
于 2014-10-10T20:16:20.460 に答える
0 
<html>
<head>
<style>
ul li, ul li:before,ul li:after{display:inline;  content:' '; }
</style>
</head>
<body>
<ul><li>one</li><li>two</li><li>three</li></ul>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
</body>
</html>
于 2013-01-30T06:41:26.973 に答える