インラインリストアイテム間の空白を管理する最良の方法

StackOverflow https://stackoverflow.com/questions/241512

質問

私の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>

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

役に立ちましたか？

解決

ここにいくつかのオプションがあります。まず、インラインリストを作成するときの通常のプラクティスを紹介します。

<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 */

空白を削除したい場合は、それに応じてマージン/パディングを調整します。

他のヒント

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

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

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

<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プロパティはおそらく最高の理論上の方法です。

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

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

頭痛のないまったく同じ視覚効果を持っています。

非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 */
}

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

<ul style="font-size:0px;">
<li style="font-size:12px;">
</ul>

同じ問題が発生しましたが、上記の解決策のいずれもそれを修正できませんでした。しかし、私はこれが私のために働くことを発見しました：

これの代わりに：

<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>

<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>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top