-1

ナビゲーション バーがあり、それをページ全体に広げたい、レスポンシブ レイアウトを持っている (これは以下に反映されていませんが、ナビゲーションを構築するために必要なコードをカットしました)、およびモバイル ビューでナビゲーションバーを別の行にドロップダウンしたいと思います。

しかし、私がやりたいのは、これらの<a>タグに背景色を付けることですが、それらが結合されているという効果を生み出すことです。

パディングを使用しようとしましたが、これはうまくいきませんでした。代わりに、全体の高さが増加しました。何かアイデアはありますか?

私のコードは以下にあり、助けていただければ幸いです

またはここで私のjsfiddleを表示

test.html

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>iManage</title>
    <style>
    @charset "utf-8";
    /* CSS Document */
    /********************************
    * CSS Reset                     *
    *********************************/
    html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {
        display: block;
    }

    body {

        line-height: 1;
        background-color:#EEEEEE;
            font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

    }

    ol, ul {
        list-style: none;
    }

    blockquote, q {
        quotes: none;
    }

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }


    /* Styles */
    header h1 {
    font-size:20px;
    text-align:center;

    }

    header nav {
        width:100%;
        background-color:#232527;

    }

    .maina > li  {

    }

    header nav a:link {
    font-size:12px;
    font-size:12px;
    width:120px;
    padding:10px;
    display:inline-block;
    background-color:#98bf21;
    }


    header {
    width:auto;
    min-height:50px;
    background-color:#374348;
    }

    header > h1 {
        font-size:24px;
        font-weight:300;
        color:#FFF;
        padding:10px;
        font-family: 'Oxygen', sans-serif;  
    }

    .main a {

    }

    .maina > li  {
        display:inline; 
        list-style:none;    
    }

    header > nav {
        font-family: 'Oxygen', sans-serif;
        text-align:center;
        height:auto;
        border:medium #999;
        float: left;
    }

    .clear:after {
        content: "";
        display: table;
        clear: both;
    }

    header nav a:link {
    color:#CCC;
    text-decoration:none;
    font-weight:bold;
    border:medium #CCC; 
    }

    header nav a:visited {
    color:#FFF;
    }


    header nav a:active {
    color:#7e7975;
    }

    header nav a:hover {
    text-decoration:underline;
    }
    </style>
    </head>


    <body>
    <div id="wrapper">
    <header class="clear">
    <h1>iManage</h1>
      <nav>
            <ul class="maina">
                <li><a href="index">Home</a></li>
                <li><a href="Projects">Projects</a></li>
                <li><a href="Settings">Settings</a></li>
            </ul>
        </nav>
    </header>

    <div id="maincontentWrapper">


    </div>
4

2 に答える 2