0

約15/20分の調査とグーグル検索の後、解決策が見つかりませんでした。

リスト項目をアンカーで埋めようとしていますが、li はインライン コードを表示するように設定されています。

#nav{
    font-family:"chaparral-pro", Georgia, "Times New Roman", serif;
    position: relative;
    background-color: #404041;
    width: 100%;
    height: 40px;
    text-align: center;
    font-size: 15px;
    margin-top: -15px;
}

#nav a{
    color: #f9a13e;
    text-decoration: none;
}

#nav a{
    display: inline-block;
    height: 100%
}

#nav a:hover{
    color: #fff;
    text-decoration: none;
}


ul#navInner{
    position: relative;
    text-align: left;
    width: 840px;
    margin: 0 auto;
    height: 40px;
    padding-top: 10px;
}

ul#navInner li{
    display: inline;
    border-right: 1px solid white;
    height: 40px;
    padding: 11px 8px 16px 8px;
}

li.noBorderR{
    border: none !important;
}

HTML:

<div id="nav">
  <ul id="navInner">
    <li><a href="_#">Home</a></li>
    <li><a href="_#">About Us</a></li>
    <li><a href="_#">Our People</a></li>
    <li><a href="_#">How can we help</a></li>
    <li><a href="_#">Newsroom</a></li>
    <li><a href="_#">Resources</a></li>
    <li><a href="_#">Careers</a></li>
    <li><a href="_#">Contact Us</a></li>
    <li class="noBorderR"><a href="_#">Text Size</a></li>
  </ul>
</div><!-- end nav -->

このような基本的な質問をここに投稿して申し訳ありません。私はこれを理解することはできません！

a{} を display: block に設定すると、li 全体がブロックに配置され、inline-block は何もしません。

4

3 に答える 3

1

のパディングと高さ/幅を使用して、必要なスペースを埋めることができますか?

于 2013-01-21T16:33:42.373 に答える
0

<a>タグに高さと幅を適用しline-height、リスト項目の高さにcssで設定するのはどうですか？

于 2013-01-21T16:34:32.303 に答える
0

パディングと高さを li に設定するのではなく、これらを a に設定し、表示ブロックに設定します。次に、line-height を a height と同じに設定すると、テキストが垂直方向の中央に配置されます。

次に、リンクを水平に表示する場合は、li を左にフロートさせます。ナビゲーションをスタイリングするときは、最も内側の要素から始めて解決するのが最善であることが常にわかります。

于 2013-01-21T16:43:40.860 に答える