css - シンプルなスペーシング CSS

Question

ウェブサイトのナビゲーションバーをデザインしました。http://jsfiddle.net/ToddStyles/D2tZH/で見ることができます。

スクリーンショット

それらの間の間隔を変更するには、どの CSS を使用しますか? 順序なしリストを使用して作成し、をに変更しdisplayましたinline。

score 0 · Accepted Answer

幅を広げたい場合は、連続する<li>s に左マージンを簡単に適用できます。

#navbar li + li {
    margin-left: 0.2em;
}

これがフィドルバックです。inline-block小さい画面でどうしても折り返してしまう場合に、レイアウト崩れを少なくするために使用するように修正しました。また、インターネット経由であなたのコンピューターの画像を見ることができないことを考慮してください.

score 0 · Accepted Answer

要素をインラインで表示している場合、HTML はすべての空白をスペースバー文字として解析します。したがって、リスト項目間のスペースをコメントアウトできます。つまり、次のようになります。

<li>...</li><!--
--><li>...</li>

または、それらをブロックレベルの要素として表示し、フロートします。

ul {
    overflow: hidden; /* To prevent collapse */
}
ul li {
    display: block;
    float: left;
}

あなたが投稿した Fiddle に関しては、<img>タグの使い方が間違っています。自己閉鎖型であり、何かをネストするために使用しないでください。

p/s: そして、コードが不足しているために Fiddle リンクを投稿できないという理由だけで、リンク短縮機能を使用しないでください。このルールには理由があります。コードを提供すると、質問のコンテキストが得られます。

2 に答える 2