3

水平方向のリストの間隔を調整していますが、空白の最初のエントリが区切り記号 (border-right) を生成しているようです。パディングを増減すると、リスト内の最初のファントム エントリが拡大および縮小されます。

このページのナビゲーション バーhttp://compuball.com/GW2/guides/ranger/pages/pet_basics_101.html

スペーサー バーは、メニュー項目の右側に作成されます...最初のスペーサーは、存在しないはずの項目に続いています。

CSS:

NAV {
    width: 940px;
    float: left;
    font-family: Geneva,Arial;
    border: 6px outset #A96505;
    background-color: #F4CB90;
}

NAV ul {
    margin: 0px auto;
    padding: 0px;
    list-style-type: none;
}

NAV li {
    display: inline;
}

NAV li a {
    text-align: center;
    border-right: 2px groove #C6995F;
    font-size: 1.6em; 
    padding: 2px 10px;
    color: #A96505;
    text-decoration: none;
}

NAV li a.last {
    border-right: none;
}

NAV li a:hover {
    color: #6D3F02;
}

HTML:

    <NAV>
        <UL>
            <LI><a href="#top">Home</a></LI>
            <LI><a href="#Intro">Introduction</a></LI>
            <LI><a href="#Charming">Acquiring Pets</a></LI>
            <LI><a href="#Classification">Classification</a></LI>
            <LI><a href="#Control">Control Panel</a></LI>
            <LI><a Class="last" href="#Management">Management Panel</a></LI>
        </UL>
    </NAV>
4

3 に答える 3

2

あなたの問題はこれです：

<HEAD>
  <A ID = "top" />
</HEAD>

これをドキュメントの外に移動し、タグ<head>の直後に移動します。また、以下の優れたコメントを考えると、タグは自己終了しない<body>ため、次のようにする必要があります。<a>

<a id="top"></a>
于 2012-10-25T01:52:03.437 に答える
2

OK、ここに決定的な問題があります。FireBug で見ると<a id="top">、Wrapper セクションに到達する前に 4 つのインスタンスがあります。これらの 1 つはナビゲーション リスト内にあり、要素を作成します (その後、パディングされます)。

ユーザーがスクロールせずにページの上部に移動できるようにする内部リンクが必要だと思います。これには、so: のように (ナビゲーション リスト内ではなく) ページの上部に1 つの<a name="top"></a>ターゲット参照が含まれ、 so:のように、必要なだけページの下にある対応するリンクが含まれます<a href="#top">Back to Top<a>。これにより、画面の上部が、ターゲット参照があるページ上のポイントに戻ります。

そう。のすべてのインスタンスを消去し<a id="top"></a>、ページの上部 (開始タグの直後<body>など) にある 1 つの適切なターゲット参照に置き換えれば問題ありません。

于 2012-10-25T03:18:58.847 に答える
1

最初の li には実際には 2 つの a タグが含まれていますが、ソースを表示したときに表示されないが、そこにある場合、それがどのように表示されるかはわかりません。Chrome でホーム リンクを右クリックし、要素の検査を選択すると、そこに一覧表示されます。

この HTML を手動で入力していますか、それとも何かが生成していますか?

ページの上部付近に次のものがあります。

 <A ID = "top" />

タグは自己終了ではないため、メニューにある最初のタグが見つかるまでタグが閉じず、メニューに余分な要素が作成されます。

<a id="top"></a>

追加のメニュー項目で問題を解決します

http://validator.w3.orgでページを実行して、他のエラーを見つけます (驚くほど少ないエラーです!よくできました!)

于 2012-10-25T01:49:31.543 に答える