1

カスタムの箇条書き画像を使用して、CSSで水平ナビゲーションメニューをコーディングしようとしています。

ほとんどのことを機能させることができますが、問題は、カスタムの箇条書き画像（ナビゲーション項目ごとに異なります）がクリック可能なリンクの一部ではないことです。

AタグをLIタグの外に移動できることは知っていますが、それはコーディング方法としては不十分です。

カスタムの箇条書き画像をクリック可能なリンクの一部にする方法を知っている人はいますか？私の直感はdisplay：blockを確認することでしたが、それでは水平方向のレイアウトが台無しになります。

これが私がこれまでに得たものです：

CSS：

#navlist {
    list-style: none;
    margin: 0;
    padding: 20px 0 0px 20px;
}

#navlist ul {
    margin: 0;
    padding: 0;
}

#navlist li {
    display:inline;
    background-repeat: no-repeat;
    background-position: 0 50%;
    padding: 3px 0 3px 35px;
    margin: 0 20px 0 .4em;
}

#navlist li a {
    text-decoration:none;
}

#navlist li.contact {
    background-image: url(img/contact.png);
}

#navlist li.about {
    background-image: url(img/about.png);
}

HTML：

<ul id="navlist">
    <li class="contact"><a href="#">Contact Us</a></li>
    <li class="about"><a href="#">About Us</a></li>
</ul>
4

6 に答える 6

1

#navlist li.contactカスタムの箇条書きは、とに適用される背景画像であると想定しています#navlist li.about。

私の提案は、liからパディングを削除し、aにパディングを追加することです。これにより、弾丸を表示するために使用される間隔がタグ内にあり、「クリック可能」になります。

于 2013-03-19T23:18:05.773 に答える
1

説明どおりに機能させるには、次を使用してみてください

表示：インラインブロック;

左のパディング/マージンを次のように変更します。

#navlist li {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 0 50%;
    padding: 3px 0 3px 0;
    margin: 0 20px 0 .4em;
}
#navlist li a {
    text-decoration: none;
    padding-left: 35px;
}
于 2013-03-19T23:24:42.290 に答える
1

あなたが望むものを達成するためのさまざまな方法があります：

1. LI WAY（非推奨）

<ul id="navlist">
<li class="contact"><a href="#">Contact Us</a></li>
<li class="about"><a href="#">About Us</a></li>
</ul>

その場合、li a {float:right; width:<fixedwidthforall>;}。したがって、すべてのアンカーに固定幅を指定し、それらを右にフロートさせて、上の背景画像liが表示されていることを確認する必要があります。多くの問題があり、上の箇条書きの画像を変更するのに苦労するでしょう:hover。

2.推奨される方法（推奨）

<ul id="navlist">
<li><a href="#" class="contact">Contact Us</a></li>
<li><a href="#" class="about">About Us</a></li>
</ul>

最も一般的な方法は、アンカーにパディングを配置 background-imageし、をアンカー（liではなく）に移動することです。これは、クラスをアンカーに移動することも意味します。

3. OKAY WAY

<div id="navlist">
<a href="#" class="contact">Contact Us</a>
<a href="#" class="about">About Us</a>
</div>

拡張可能なナビゲーションをまったく必要としない小さなWebサイトの場合、次のスタイルのアンカーを備えたdivで十分です。不必要に物事を複雑にする必要はありません。

<style>
#navlist a {
display: block;
float: left;}
</style>

4.反逆の道

型にはまらない、反抗的なことをしたい場合は、この種のマークアップを使用してください。

<ul id="navlist">
<li><a href="#" class="contact">Contact Us
<img src=""></img></a></li>
<li><a href="#" class="about">About Us
<img src=""></img></a></li>
</ul>

ナビゲーションリンクに画像を追加してみませんか？または、ページ全体をとしてdisplay:none表示し、ホバーで表示してみませんか。誰もそれをしませんが、常にパイオニアでなければなりません！

ボトムノート

「AタグをLIタグの外に移動できることはわかっていますが、それはコーディングの慣習としては不十分です。」

ナビゲーションリンクのスタイルを設定するには、さまざまな方法があります。慣習と優れたコーディングがありますが、それは法律ではありません。多くの場合、基準から逸脱する人々が新しいイノベーターです。

ナビゲーションに2つのリンクが含まれている場合、ul、li、およびaを作成するのに苦労する価値はありますが、はるかに高速で、aと同じ品質で実行できますか？

PS：クラスは繰り返し要素に使用され、IDは一意の要素に使用されます。他の要素で同じスタイルを再利用しない限り、それらはidである必要があります...しかし、繰り返しになりますが、これは慣例です。あなたは自由に選ぶことができます！

于 2013-03-20T02:41:42.600 に答える
0

追加

#navlist li {
list-style-position: inside;
}
于 2013-03-19T23:18:01.257 に答える
0

liの代わりにaのスタイルを設定し、それにbackground-imageを適用するだけです。これはまた、はるかにセマンティックです。変更されたコードは次のようになります。

#navlist li {
    display:inline;
}

#navlist li a {
    text-decoration:none;
    background-repeat: no-repeat;
    background-position: 0 50%;
    padding: 3px 0 3px 35px;
    margin: 0 20px 0 .4em;
    display: inline-block; // to make the padding work
}

#navlist li.contact a {
    background-image: url(img/contact.png);
}

#navlist li.about a {
    background-image: url(img/about.png);
}
于 2013-03-19T23:20:31.443 に答える
0

background-imageこの方法を試してみるとわかりません<a>

#navlist {
    list-style: none;
    margin: 0;
    padding: 20px 0 0px 20px;
}

#navlist ul {
    margin: 0;
    padding: 0;
}

#navlist li {
    display:inline;

}

#navlist li a {
    text-decoration:none;
    background-repeat: no-repeat;
    background-position: 0 50%;
    padding: 3px 0 3px 35px;
    margin: 0 20px 0 .4em;
}

#navlist li.contact a{
    background-image: url(img/contact.png);
}

#navlist li.about a{
    background-image: url(img/about.png);
}

作業デモ
はこの助けを願っています

于 2013-03-20T01:54:32.620 に答える