web-dev-qa-db-ja.com

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

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

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

htmlcsshtml-listsnavigation-style
34
aJanuary

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

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

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

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

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

空白を削除したいことに気づき、それに応じてマージン/パディングを調整してください。

29
thismat

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

27
Marius Schulz

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>

私が見たもう一つのことは空白を消費するために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>

フロートを使用しても問題がない場合は、このマットの解決策を参照してください。要件によっては、<li>に設定されている末尾のclear: both;を追加する必要がある場合があります。

しかし、CSS3プロパティはおそらくbest理論的な方法です。

16
J. Holmes

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

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

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

9
Louisa

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

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

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

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

これの代わりに：

<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>
1
micha
<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>
0
user2024227